【Vue3-vite】动态导入路由

route文件结构

• router
  • module
  • index.ts

路由定义

// 需要导入的路由如下：
const routes = [
  {
    path: '/manage',
    name: 'manage',
    component: () => import('@/views/home/index.vue'),
    children: manageRoutes,
  }
 ]

index.ts实现从module中自动导入

// 动态导入
const routeFiles = `import.meta.globEager`('./module/*.ts')
Object.keys(routeFiles).forEach((routePath) => {
  const fileModule = routeFiles[routePath].default
  manageRoutes.push(...fileModule)
})

import.meta.glob与import.meta.globEager的区别

glob为异步加载，而globEager为同步加载

• glob获取文件的promise函数，需要执行才能返回文件内容。如:

const routeFiles = import.meta.glob('./module/*.ts')
Object.keys(routeFiles).forEach(async (routePath) => {
  const fileModule = await routeFiles[routePath]()
  manageRoutes.push(...fileModule)
})

使用上述代码自动导入路由需要在路由注册前执行完，会影响系统性能，不建议
可以用于整组件的导入，如svg组件的使用

• globEager获取到的值为（ 文件路径：导出内容）的对象

const routeFiles = import.meta.globEager('./module/*.ts')
Object.keys(routeFiles).forEach((routePath) => {
  const fileModule = routeFiles[routePath].default
  manageRoutes.push(...fileModule)
})

同步执行，不影响系统性能,推荐用来做路由的自动导入