为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

温温酱 2023-10-20 16:08:35
我正在使用 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。
查看完整描述

1 回答

?
SMILET

TA贡献1796条经验 获得超4个赞

你有两个选择...

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

    }

  })

});


查看完整回答
反对 回复 2023-10-20
  • 1 回答
  • 0 关注
  • 52 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信