[Feature]: Async Route Children

[patrickhousley]

Async loading of children allows complex child route configurations to be asynchronously loaded into an existing route. This allows developers to more easily split their applications into lazy loaded modules through the likes of Webpack. Only those async children that are routed to are loaded, no unnecessary HTTP calls or processing of children. The only limitation I can see so far with this feature is that nested async named routes are not supported since they are not loaded into the nameMap until the routes are resolved and injected into the router instance.

Example configuration:

// src/routes.ts
export const routes: VueRouter.RouteConfig[] = [
  {
    path: '/lazy',
    children: async () => new Promise<Vue>(resolve => {
      require.ensure(
        [],
        async require => {
          resolve((require('./lazy/routes') as { routes: VueRouter.RouteConfig[] }).Routes);
        },
        'lazy'
      );
    })
  }
];

// /lazy/routes.ts
export const routes: VueRouter.RouteConfig[] = [
  {
    {
      path: '/one',
      component: OneComponent
    },
    {
      path: '/two',
      component: TwoComponent
    }
  }
];

[posva]

Why don't you just use the async component syntax? How can the totality of your children routes config be so big that it needs to be lazy loaded?
If you need to dynamically add complex children routes, you can use addRoutes already. For children this fr should also address your problem

[patrickhousley]

I would not dismiss the idea that child routes could become large. Doing so would dismiss the idea that Vue and Vue Router could be used for large enterprise applications. That said, I can certainly try that FR. Is there work underway on it? If not I can try adding it. Thinking out loud, that FR would require:

• Update create-route-map.js createRouteMap to take a parent RouteRecord.
• Update create-matcher.js addRoutes to take a parent path. It will use pathMap to resolve the correct RouteRecord. It will use nameMap to resolve the correct named RouteRecord.
• Update index.js addRoutes to take a parent RouteRecord.
• Update create-route-map.js compileRouteRegex to match any and all children for routes that have no children. Deep linking to a child route that is not yet loaded into the router is a must have.
• Will this ensure all named and aliased routes are updated?
• Would it be better to update the route records in the async component beforeRouteEnter instead of beforeCreate. Or maybe a separate, new component guard method. How can we ensure the children are only added once?
• The router will need to reconsider the current route being loaded to ensure there are not additional components that should be loaded.

[pymarco]

Thank you everyone for such quality work and awesome library!

Any chance this will get merged in soon?

[greabock]

any progress on this?

[lilong7676]

any progress on this?

[EvanBurbidge]

Any idea when this feature will be introduced?

[posva]

Thank you for the efforts put on this but I don't think this is worth pursuing given the points mentioned.
If you think otherwise, this is worth going through the process of an RFC: https://github.com/vuejs/rfcs