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

最新推荐文章于 2026-06-22 09:58:07 发布

原创最新推荐文章于 2026-06-22 09:58:07 发布 · 2.3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了在Vue3和Vite环境中，如何处理接口返回的动态路由数据，特别是针对component属性的处理。由于常规的import方式在打包时会出现问题，文章提出使用import.meta.glob方法来动态加载组件，确保在运行和打包后都能正确找到组件文件。通过实例代码展示了如何将接口数据与import.meta.glob结合，成功添加路由。

问题

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