vue3 + vite使用addroute时接口返回数据导致component的问题

问题

接口返回数据导致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)
})

end