vue3 动态路由加载路由文件

### Vue3 中实现动态路由 在 Vue3 中，可以利用 `import.meta.glob` 和 `axios` 来实现动态路由的加载。以下是具体实现方式： #### 使用 `import.meta.glob` 动态导入路由模块 通过 `import.meta.glob` 可以批量引入指定路径下的所有 `.ts` 或者其他类型的文件，并将其转换成路由配置项。 ```typescript // 导入必要的类型声明 import type { RouteRecordRaw } from 'vue-router'; function getAllMainRoutes(): RouteRecordRaw[] { // 批量导入 @/router/main 下所有的 .ts 文件作为路由配置 const modules: Record<string, any> = import.meta.glob('@/router/main/**/*.ts', { eager: true, import: 'default' }); // 将各个单独的路由对象收集到数组中返回 let allRoutes: RouteRecordRaw[] = []; allRoutes = Object.values(modules); return allRoutes; } ``` 此函数会扫描给定目录下所有符合条件的文件并自动构建出完整的路由表[^2]。 #### 结合后端接口数据创建个性化路由结构 对于更复杂的场景，比如根据用户的权限级别定制化展示不同页面，则可以在应用启动初期先发起一次 HTTP 请求获取服务器下发的具体菜单信息，再基于这些信息调用 `router.addRoute()` 方法完成实际注册过程。 ```javascript const getRouter = async () => { try { const response = await axios.get("http://localhost:3000/router"); if (response.status === 200) { dynamicRouting(response.data); // 假设这里实现了具体的逻辑处理 } } catch(error){ console.error('Failed to fetch router data:', error); } }; ``` 上述代码片段展示了如何从远程API拉取最新的路由设置，并传递给后续用于生成最终导航条目的辅助函数[^3]。 #### 注册新发现的子级或同级路由节点 一旦获得了更新后的路由描述符列表之后，就可以借助于 Vue Router 提供的功能轻松地把这些新增加的部分加入现有体系当中去。 ```javascript dynamicRouting(routesData) { routesData.forEach(routeConfig => { this.$router.addRoute({ path: routeConfig.path, name: routeConfig.name, component: () => import(`@/${routeConfig.component}`), meta: routeConfig.meta || {}, children: routeConfig.children ? [...routeConfig.children] : [] }) }); } ``` 这段 JavaScript 函数接收来自外部的数据源（可能是之前提到过的 API 返回的结果），并通过迭代遍历的方式逐一对每一条记录执行添加操作。注意这里的懒加载机制 (`component: () => import(...)`) 是为了提高初次渲染性能而设计的特性之一[^1]。