import.meta.glob 自动读取路由

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
const initRouteModules = async () => {
  // vite提供的批量导入文件方法，导入模块路由
  // 需要在应用加载时就预先加载所有匹配到的模块，以便加快应用的启动速度{ eager: true }，可能导致初始加载慢，按需开启
  const routeModules = import.meta.glob('../views/*/routes.js', { eager: false })

  const routes = await Promise.all(
    Object.keys(routeModules).map(async (path) => {
      const routeModule = await routeModules[path]()
      return routeModule.default
    })
  )

  return routes.flat()
}

// 初始化模块路由
const moduleRoutes = initRouteModules()

// 等待模块路由初始化完成
const routes = await moduleRoutes

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'Home',
      component: () => import('../views/home/index.vue')
    },

    // 添加模块路由
    ...routes
  ]
})

export default router

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

src/views/home/routes.js

const initRouteModules = async () => {
  // vite提供的批量导入文件方法，导入模块路由
  // 需要在应用加载时就预先加载所有匹配到的模块，以便加快应用的启动速度{ eager: true }，可能导致初始加载慢，按需开启
  const routeModules = import.meta.glob('./subPages/*/route.ts', { eager: false })

  const routes = await Promise.all(
    Object.keys(routeModules).map(async (path) => {
      const routeModule = await routeModules[path]()
      return routeModule.default
    })
  )

  return routes.flat()
}

// 初始化模块路由
const moduleRoutes = initRouteModules()

// 等待模块路由初始化完成
const routes = await moduleRoutes

export default [
  {
    path: '/home',
    name: 'Home',
    component: () => import('./index.vue'),
    meta: {
      title: '首页'
    },
    children: routes
  }
]

src/views/myWorkbench/routes.js

const initRouteModules = async () => {
  // vite提供的批量导入文件方法，导入模块路由
  // 需要在应用加载时就预先加载所有匹配到的模块，以便加快应用的启动速度{ eager: true }，可能导致初始加载慢，按需开启
  const routeModules = import.meta.glob('./subPages/route.js', { eager: false })

  const routes = await Promise.all(
    Object.keys(routeModules).map(async (path) => {
      const routeModule = await routeModules[path]()
      return routeModule.default
    })
  )

  return routes.flat()
}

// 初始化模块路由
const moduleRoutes = initRouteModules()

// 等待模块路由初始化完成
const routes = await moduleRoutes

export default [
  {
    path: '/myWorkbench',
    name: 'MyWorkbench',
    component: () => import('./index.vue'),
    meta: {
      title: '我的工作台'
    },
    children: routes
  }
]

src/views/myWorkbench/subPages/route.js

export default [
  {
    path: '/score_query',
    name: 'score_query',
    component: () => import('./scoreInquiry/index.vue'),
    meta: {
      title: '成绩查询'
    },
  },
  {
    path: '/score_import',
    name: 'score_import',
    component: () => import('./scoreImport/index.vue'),
    meta: {
      title: '成绩导入'
    },
  }
]

项目目录结构