Vue의 상위 구성 요소 및 중첩된 모든 경로를 느리게 로드합니다.

Vue의 상위 구성 요소 및 중첩된 모든 경로를 느리게 로드합니다.

중첩된 경로를 느리게 로드하는 데 문제가 있습니다.

부모 루트입니다.

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,vuexSSR 사용

나는 두 가지 명백한 문제를 보고 있다.

첫째, 콜 시 코드가 vue-router 문서와 다른 것 같습니다.require()대신import().

여기를 봐주세요

• 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

이 경우 아이는''route는 와 같습니다./child아이들에게서.1개의 루트에 2개의 컴포넌트가 로드되면 Vue는 혼란스러울 가능성이 매우 높습니다.이 문제를 해결하면 문제가 사라집니다.

부모 루트

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

언급URL : https://stackoverflow.com/questions/41509924/load-vues-parent-component-and-all-nested-routes-lazily