Question

我在延迟加载嵌套路由时遇到问题！

这是我的父路线：

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

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

我的child.route.js是

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
    },
    ...
]

当然第一个子路径（childHome）会自动工作，但之后我只会得到没有渲染组件的空白页面！如果我懒惰地加载父母和孩子，一切都会好的！

我做错了什么？

值得一提的是我的项目使用vue 2.0，vue-router，vuex和SSR

Answer 1

我正在研究两个明显的问题。

首先，看起来您的代码在调用 require() 而不是 import() 方面与 vue-router 文档不同。

看这里

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

您的 child.route.js 文件的改进版本是

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
    },
]

这有可能解决您可能遇到的任何延迟加载问题。也有可能是无关紧要的，如果是这样，请继续阅读。

第二个问题，/child 路由有一些难题，vue-router 对这些东西很挑剔。您的父路由文件有一个用于 /child 路由的组件：

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

那么你的子路由文件也有这个路由的组件：

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

在这种情况下，子路径 '' 与子路径中的 /child 相同。当为一个路由加载两个组件时，Vue 很可能会混淆。解决这个问题，你的问题就会消失。

Answer 2

父母路线

evalb(evalf(x < y))

child.route.js

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

懒洋洋地加载Vue的父组件和所有嵌套路由

2 个答案: