Vue Router如何实现动态路由与组件匹配 无需手动配置大量子路由

你期望的写法无法直接运行的核心原因是：Vite、Webpack等构建工具需要在编译阶段静态分析导入路径，不支持完全动态的字符串拼接作为import参数。以下是两种生产环境可用的高效方案：

方案1：Vite 项目实现 #

使用Vite内置的import.meta.globAPI预扫描指定目录下的所有页面组件，再和路由参数做匹配：

// 预扫描student目录下所有vue页面
const studentPages = import.meta.glob('pages/student/*.vue')

const routes: RouteRecordRaw[] = [
  {
    path: '/student',
    component: () => import('layouts/StudentLayout.vue'),
    children: [
      // 原有固定路由可以保留
      { path: '', redirect: '/student/dashboard' },
      // 动态匹配路由
      {
        path: ':pagename',
        async component(to) {
          const pagePath = `pages/student/${to.params.pagename}.vue`
          // 匹配到对应页面则返回，否则返回404
          return studentPages[pagePath]?.() ?? import('pages/404.vue')
        }
      }
    ]
  }
]

方案2：Webpack/Vue CLI 项目实现 #

使用Webpack的require.contextAPI实现同样的预扫描逻辑：

// 预扫描student目录下所有vue页面，false代表不遍历子目录
const studentPageCtx = require.context('pages/student', false, /\.vue$/)

const routes: RouteRecordRaw[] = [
  {
    path: '/student',
    component: () => import('layouts/StudentLayout.vue'),
    children: [
      {
        path: ':pagename',
        async component(to) {
          const pageName = to.params.pagename as string
          try {
            return require(`pages/student/${pageName}.vue`).default
          } catch(e) {
            return import('pages/404.vue')
          }
        }
      }
    ]
  }
]

进阶优化：全量自动生成路由 #

如果有多个布局（比如教师端、管理端），可以直接按目录约定自动生成所有路由，完全不用手动写子路由配置：

• 目录约定：layouts/[角色]Layout.vue对应pages/[角色]目录下的所有页面
• 批量扫描layouts和pages目录下的所有文件，自动拼接生成路由数组，后续新增页面直接放到对应目录即可生效，无需修改路由配置

注意事项 #

• 页面文件名需要和路由参数的大小写完全匹配，建议统一用小写命名规则避免出错
• 必须添加404兜底逻辑，避免匹配不到页面时出现白屏
• 生产构建时工具会自动打包所有预扫描的页面文件，不会出现动态导入找不到资源的问题

内容的提问来源于stack exchange，提问作者user16853634