Dynamically add child routes in Vuejs Dynamically add child routes in Vuejs vue.js vue.js

Dynamically add child routes in Vuejs


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.