vue 动态路由component 传递变量报错问题？

作者站长头像
站长
· 阅读数 6

menuList 后台数据返回格式

{
    // 统计分析
    path: '/statistics',
    name: 'Statistics',
    meta:{title: '数据统计'},
    component: 'views/statistics/Statistics'
}

路由里面component 接收的是 @/views/statistics/Statistics 能正常显示页面

vue 动态路由component 传递变量报错问题？vue 动态路由component 传递变量报错问题？

如果动态参数，以下三种都会报错，页面空白

let cop = `@/${item.component}`
// item.component = () => import(cop)
// item.component = resolve => require([cop], resolve)
// item.component = Promise.resolve().then(() => require(`@/${item.component}`))

vue 动态路由component 传递变量报错问题？vue 动态路由component 传递变量报错问题？

已解决 —— chatGPT 解决方案

vue 动态路由component 传递变量报错问题？

vue 动态路由component 传递变量报错问题？

回复
1个回答
avatar
test
2024-07-03

name为组件页面地址


const lazyComponent = (name) => () => import(`@/${name}.vue`)
或者
//const lazyComponent = (name) => (resolve) => require([`@/${name}.vue`],resolve)
item.component = lazyComponent(item.component)
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容