vue-router 动态导入组件时不渲染组件

Question

我正在使用 vue-router，并且在动态导入时注册组件时遇到问题。

如果我使用基本的硬编码代码，路由器将正常工作。但是，如果我动态加载我的路线，它将无法渲染我的组件。

动态导入组件文件：

GetAllPages((data) => {

    let pages = [];

    data.map(page => {

        const pageTitle = page.title.rendered.toLowerCase();

        import(`../pages/${pageTitle}.js`).then(module => {

            pages.push({

                path: `/${pageTitle}`,

                name: `${pageTitle}`,

                component: module.default

            })

        })

    })

    return pages;

})

路由器功能：

new VueRouter({

    mode: 'history',

    // routes: pages <= not registering data

    routes: [

        {path: '/about', component: About} // <= working fine

    ]

});

动态导入的文件：

let AboutPage = {

    data: () => ({

        Message: "hey"

    }),

    render: () => {

        return "<h1>{{Message}}</h1>";

    }

}

export default Vue.component("About", {

    data: AboutPage.data,

    template: AboutPage.render()

})

问题是硬编码的路由可以工作，而动态导入的页面则不能。即使我在 data.map 函数中对动态导入的值进行硬编码，它也不会渲染出我的页面。控制台中没有来自路由器的错误。

PS：如果我console.log路由器实例，则会设置动态导入的路由。但不渲染 html。

Answer 1

你有两个选择...等到所有导入都解决后再创建路由器。这将涉及能够推迟根 Vue 实例的创建使用延迟加载组件创建路由器。我会推荐选项#2new VueRouter({  mode: 'history',  routes: data.map(page => { // data as defined in your GetAllPages function    const pageTitle = page.title.rendered.toLowerCase()    return {      path: `/${pageTitle}`,      name: pageTitle,      component: () => import(`../pages/${pageTitle}.js`)    }  })});