Dynamically add child routes in Vuejs

Question

According to this official example, we have the ability to add nested/children routes in vuejs. But I cannot find any help/docs around a way to add these children routes dynamically. e.g only add child routes when Parent route is visited.

Currently all the routes in a Vue application are defined in a single place where we create Router instance. There is an api called addRoutes, but I don't know how to use that to add lazily loaded features of application along side their routes. If someone is familiar with Angular2+ Module system, that has this ability to define routes for the feature modules inside that module and even make them lazily loaded. Wondering if something could be achieved with VueJs?

Ben Everard · Accepted Answer · 2020-06-11 16:34:44Z

12

You can use $router.addRoutes to re-add a route, specifying children.

You'll need to get the current route definition (as opposed to the $route object) by searching the $router.options.routes array for the route definition object that matches the current $route.path. Then add a children array of route definitions to the object and pass it to $router.addRoutes.

created() {
  let { routes } = this.$router.options;
  let routeData = routes.find(r => r.path === this.$route.path);
  routeData.children = [
    { path: 'bar', component: Bar },
    { path: 'baz', component: Baz },      
  ];
  this.$router.addRoutes([routeData])
}

Here's an example fiddle of dynamically adding child routes in the created hook of a route's component definition.

edited Jun 11, 2020 at 16:34

Ben Everard

13.8k14 gold badges69 silver badges96 bronze badges

answered Feb 16, 2018 at 18:45

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nexus23 Over a year ago

thanks for your answer. One last piece of the puzzle. It works when we usually navigate on the client side but it breaks when do the full reload on child path. Full realod ended up in 404.

Sandeep sandy Over a year ago

Is there any solution to full reload on child path(f5) in December 2018.

Evan Burbidge Over a year ago

Still no way of persisting this data via page refresh. Vue router really needs this functionality if it wants to go up against the likes of React Router.

Alex Gyoshev Over a year ago

The router is reactive, so even a missing route can work after a full reload, if the route is subsequently added to the page. This should work unless there's a * route with redirect. See codesandbox.io/s/vue-dynamic-components-owhwr

EaBengaluru Over a year ago

@thanksd could you please look into the problem of mine stackoverflow.com/questions/72686564/…

Collectives™ on Stack Overflow

Dynamically add child routes in Vuejs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related