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?

Malamud

Answer 1

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.

Triennium

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. – Malamud

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

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. – Stare

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 – Prefab

@Triennium could you please look into the problem of mine #72687064 – Backache