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

Question

menuList 后台数据返回格式

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

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

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

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

请问有没有好的办法解决这个问题？

Answer 1

动态路由你需要处理的问题只有一个，那就是资源的映射，如果你在代码内不体现import的操作，那么webpack是不会将资源进行打包，你可以参考这个方案

const map={
 login:() => import('login/index')
}
//你存在服务端的map类似于
const serviceMap=[
 { path: '/login', component: 'login', hidden: true }
]
//之后遍历这个map，动态生成asyncRoutes,然后调用vue的addRoutes
并将 component 替换为 map[component]

你目前的方案，我建议直接使用全量路由，然后菜单做v-if的隐藏，再加一个路由拦截其实也就实现了。

Answer 2

别用这种动态路由了球球了，页面都没有动态渲染的功能弄个动态路由不是给自己找罪受

Answer 3

name为组件页面地址

const lazyComponent = (name) => () => import(`@/${name}.vue`)
或者
//const lazyComponent = (name) => (resolve) => require([`@/${name}.vue`],resolve)
item.component = lazyComponent(item.component)