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

你有两个选择...

1. 等到所有导入都解决后再创建路由器。这将涉及能够推迟根 Vue 实例的创建

2. 使用延迟加载组件创建路由器。

我会推荐选项#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`)

    }

  })

});