问题
接口返回数据导致component
无法像正常路由那样使用component: () => import('view/xxx.vue')
的方式引入文件
可以直接翻到底下看解决方法
详解
很多后台管理系统,路由都是通过请求获得,一般流程都是通过使用addroute
处理接口返回的路由信息
在vue3
+vite
中,动态路由component
写法是
router.addRoute({
name: "demo",
path: "/demo",
component: () => import('view/demo.vue'),
});
除了component
属性,其他属性不需要做特殊处理
component
属性,如果直接写成下例方法,这运行不会报错,但是打包后会找不到component
属性中的文件,我们需要一个Vite
支持的import.meta.glob
方法来实现
// 这样写运行不会报错,但是打包后会有问题
const res = [ // 接口数据
{
name: "demo",
path: "/demo",
component: '/view/demo.vue',
},
...
]
res.forEach(item => {
item.component = getComponent(item.component)
...
})
/**
* 处理component
*/
function getComponent(path) {
return () => import(`../../${path}`)
}
...
res.forEach(item => {
router.addroute(item)
})
解决方法
import.meta.glob
方法
先看vite官网(点击跳转)中关于import.meta.glob
的解释
所以,这样写就可以了~
// 看实际需求,这边举例就先引入所有view中的vue文件
const modules = import.meta.glob('../../view/**/*.vue')
const res = [ // 接口数据
{
name: "demo",
path: "/demo",
component: '/view/demo.vue',
},
...
]
res.forEach(item => {
// 通过key值找到 modules 中对应的属性,访问对应的模块
item.component = modules[`../../${item.component}`]
...
})
...
res.forEach(item => {
router.addroute(item)
})