时间戳

首页 > 解决方案 > 动态导入组件时vue-router不渲染组件

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

问题描述

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

标签： javascriptvue.jsvue-router

解决方案

你有两个选择...

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

推荐阅读