Load Vue's parent component and all nested routes lazily

Question

I have an issue with lazy loading of my nested routes!

this is my parent route:

import ChildRoutes from "app/modules/child.route”;

routes: [
    {
        path: '/child',
        component: resolve => require(['app/modules/root'], resolve),
        children: ChildRoutes
    }
]

and my child.route.js is

import ChildHome from …
import ChildContact from …

export default [
    {
        path: '',
        name: 'childHome',
        component: ChildHome
    },
    {
        path: 'about',
        name: 'childAbout',
        // doesn’t work
        component: resolve => require(['./components/about.vue'], resolve)
    },
    {
        path: 'contact',
        name: 'childContact',
        // this one doesn’t work as well
        component: ChildContact
    },
    ...
]

Of course the first sub-rout (childHome) works automatically, but after that I just get blank pages with no component rendered! If I load neither parent nor children lazily, everything will be fine!

What am I doing wrong?

Worth to mention my project uses vue 2.0, vue-router, vuex with SSR

Answer 1

I'm looking at two apparent problems.

First, it looks like your code diverges from the vue-router docs in calling require() instead of import().

See it here

• https://router.vuejs.org/guide/advanced/lazy-loading.html

The improved version of your child.route.js file is

import ChildHome from "";
import ChildContact from "";

export default [
    {
        path: '',
        name: 'childHome',
        component: ChildHome
    },
    {
        path: 'about',
        name: 'childAbout',
        component: () => import("./components/about.vue")
    },
    {
        path: 'contact',
        name: 'childContact',
        component: ChildContact
    },
]

There is a chance that this could resolve whatever lazy loading problems you may have. There is also a chance that it's inconsequential, and if so, read on.

---

Second issue, there is a bit of a conundrum with the /child route, and vue-router is picky with these kinds of things. Your parent route file has a component for the /child route:

    path: '/child',
    component: resolve => require(['app/modules/root'], resolve),

Then your child route file also has a component for this route:

    path: '',
    name: 'childHome',
    component: ChildHome

In this case, the child '' route is the same as /child from the children. Vue is very likely confused when two components are loaded for one route. Clear this up and your problems should go away.

Answer 2

Parent route

import ChildRoutes from "app/modules/child.route”;
routes: [
    ...ChildRoutes,
]

child.route.js

export default [ 
    {
        path: '/child',
        component: () => import ('@/app/modules/root'), <-- Just verify this path,
        children: ...
    }
]