Dynamically add child routes to an existing route

[miki2826]

I am building a large scale application with "mini applications" hosted within the application.
Each mini application is being developed by another team.
I would like to dynamically add nested child routes to an existing route to allow dynamic registration of each of the mini apps.

for example:

const routes = [
        {path: 'a', component: ComponentA, name: 'a'},
        {path: 'b', component: ComponentB, name: 'b'},
];

//MiniApp.js
export default Vue.extend({
    beforeCreate () {
        this.$router.addChildRoutes(this.$router.currentRoute.path, routes);
    },
    template: `
<div>
  <div class="page-host">
  <router-link to="{name: 'a'}">a</router-link>
  <router-link to="{name: 'b'}">b</router-link>
  <transition name="fade" mode="out-in">
    <keep-alive><router-view class="view"></router-view></keep-alive>
  </transition>
  </div>
</div>`,
});

//The app itself
Vue.use(Router);
import MiniApp from "./MiniApp";

const config = {
    linkActiveClass: 'active',
    scrollBehavior: () => ({x: 0, y: 0}),
    routes: [
        {path: '/mini', component: MiniApp, name: 'mini'}},
    ]
};
let router = new Router(config);
const vue = new Vue({
   router,
   template: `
<div>
  <div class="page-host">
  <router-link to="/mini">a</router-link>
  <transition name="fade" mode="out-in">
    <keep-alive><router-view class="view"></router-view></keep-alive>
  </transition>
  </div>
</div>`,
}).$mount('#app');

[fnlctrl]

Since the MiniApp is loaded synchronously (not lazy loaded), why not simply expose its routes and use it when creating the router?
e.g.

//MiniApp.js
export const MiniAppRoutes = [
        {path: 'a', component: ComponentA, name: 'a'},
        {path: 'b', component: ComponentB, name: 'b'},
];

export default Vue.extend({...});

//////////////////////////////////////////////////////////

//The app itself
Vue.use(Router);
import MiniApp, { MiniAppRoutes } from "./MiniApp";

const config = {
    routes: [
        {path: '/mini', component: MiniApp, name: 'mini', children: MiniAppRoutes }},
    ]
};
let router = new Router(config);

[miki2826]

@fnlctrl you are right when the app is loaded synchronously, but this is just an example.
The real world example will require lazy loading.

[fnlctrl]

But the routes must be loaded synchronously, otherwise when visiting a url that uses a lazy loaded component, the router won't be able to recognize that route.

e.g.

const config = {
    routes: [
        {path: '/mini', component: () => System.import('mini-app'), name: 'mini' }},
    ]
};

Now, when directly visiting /mini/foo, the router won't be able to match it to /mini and load MiniApp, since it has no knowledge of such child routes (foo) yet.

[varHarrie]

Same case in my project.
In order to disable some routes, the child routes depend on the role of user. And after someon logined, add child routes to an existing route with lazy loading.

[fnlctrl]

@varHarrie For that use case, we already have a better and simpler solution:
Add a check for login(auth) state inside a beforeEach hook, and redirect users elsewhere if they're not logged in, while all routes are statically loaded. Check out navigation guards docs and the auth flow example

[donnysim]

Need this also as my app loads modules, each module has a setup method that registers their properties and I need a way to add a child route dynamically.

Tried:

        this._dashboardRoutes = [
            { name: 'dashboard', path: '', component: require('../../pages/dashboard/Index.vue') },
        ];
        this._globalRoutes = [{
            path: '/',
            component: require('../../pages/DashboardWrapper.vue'),
            meta: { auth: true },
            children: this._dashboardRoutes
        }];

        this._router = new VueRouter({
            mode: 'hash',
            scrollBehavior: () => ({ y: 0 }),
            routes: this._globalRoutes,
        });

but after digging inside realized that it generates a route map only when addRoutes is called, so it does not find other routes :\

[donnysim]

Honestly, a refresh function would be all I need 🗡
Edit: nwm, it copies the route so it doesn't refresh it from the same list :\

[DanielPe05]

@posva Is there a plan to implement this? Being able to specify parent: "someRoute" when using addRoutes seems like a no brainer. In my case the application has 2 completely different layouts for authed users vs users that have not signed in. A nice approach would be to have everything that is authed under /app for example, but almost all my routes are added dynamically using addRoutes, so there is no way of specifying a parent right now.

[posva]

Yeah, but I think that taking an optional first parameter for the parent may be better:

// parentName is a string and must match a route's name
addRoutes([parentName, ]routes)

For the moment, nobody is looking into this. We'll come when we can 🙂

[DanielPe05]

I like it @posva, I will take a stab at it as soon as I have some free time and submit a PR.

[patrickhousley]

Could we go one step further and add support for lazy loaded children. This could be done by allowing children to be of types: RouteConfig[] | () => RouteConfig[] | () => Promise<RouteConfig[]>?

We will also need support for deep linking into an async child route.