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

【问题标题】：vue-router not rendering component when dynamically importing components动态导入组件时vue-router不渲染组件
【发布时间】：2021-03-19 06:43:33
【问题描述】：

我正在使用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。

【问题讨论】：

当你 return pages; 时，它将是一个空数组，将来会被填充 - 也许这就是问题 - 你如何使用 GetAllPages 函数?你还没有证明
页面不会返回空数组。而getalpages只是一个会获取所有页面的api请求。除此之外，我对请求做的不多，所以知道返回数据是无关紧要的。我控制台记录了路由器的实例，所有路由都在其中设置。只是不显示html
如果你认为pages在返回时会被填满，那你就不懂异步

标签： javascript vue.js vue-router

【解决方案1】：

你有两个选择...

等到所有导入解决后再创建路由器。这将涉及能够推迟创建根 Vue 实例
使用lazy-loaded components 创建您的路由器。

我会推荐选项 #2

new 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`)
    }
  })
});

【讨论】：