Vue Router如何编程式创建路由？批量页面组件路由优化方案

当然可以实现这种类似Express的动态路由方式！手动逐个导入页面并配置路由确实非常繁琐，结合Vue Router的动态路由匹配和Webpack的模块批量导入能力，我们可以自动完成页面组件的路由配置，新增页面后完全不用修改路由文件。

核心思路 #

利用Webpack提供的require.contextAPI批量遍历pages目录下的所有页面组件，自动解析每个组件的路由路径、名称，然后生成对应的路由配置数组，最后传入Vue Router实例。

具体实现代码 #

替换你原来的路由配置文件（通常是src/router/index.js）为以下代码：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

// 1. 批量获取pages目录下所有.vue文件（包括子目录）
const pageComponents = require.context('@/pages', true, /\.vue$/);

// 2. 遍历所有组件，自动生成路由配置
const routes = pageComponents.keys().map(filePath => {
  // 解析文件路径，提取关键信息
  // 示例filePath: './page-A/page-a.vue'
  const pathSegments = filePath.split('/');
  // 获取页面文件夹名（比如page-A）
  const folderName = pathSegments[1];
  // 获取组件文件名（比如page-a.vue）
  const fileName = pathSegments[2].replace('.vue', '');

  // 生成路由路径：这里可以根据需求调整，比如用文件夹名或文件名
  // 如果你想路由路径和文件夹名一致，就用`/${folderName}`
  // 如果你想和文件名一致，就用`/${fileName}`
  const routePath = `/${folderName}`;

  // 导入组件（支持按需加载，打包时自动拆分chunk）
  const component = () => import(`@/pages/${folderName}/${fileName}.vue`);

  // 生成路由名称：优先用组件自身的name属性，没有则自动生成驼峰式名称
  const componentModule = pageComponents(filePath).default;
  const routeName = componentModule.name || folderName.split('-').map(word => {
    return word.charAt(0).toUpperCase() + word.slice(1);
  }).join('');

  return {
    path: routePath,
    name: routeName,
    component: component
  };
});

// 3. 创建Router实例并导出
export default new Router({
  routes: routes
});

关键细节说明 #

1. require.context参数解释

   • 第一个参数@/pages：指定要遍历的根目录（@是Vue项目中src目录的别名）
   • 第二个参数true：表示递归遍历所有子目录
   • 第三个参数/\.vue$/：正则表达式，只匹配.vue后缀的文件

2. 路由路径自定义
   如果你希望路由路径和文件名一致（比如/page-a对应page-a.vue），只需要把routePath改成/${fileName}即可，完全可以根据你的项目结构调整解析逻辑。

3. 按需加载优化
   代码中用() => import(...)的方式导入组件，Webpack会自动将每个页面组件打包成独立的chunk文件，实现按需加载，提升应用首屏加载速度。

4. 排除特殊页面
   如果有某些页面不需要自动加入路由（比如公共组件、测试页面），可以在遍历前过滤掉：

   const routes = pageComponents.keys()
     .filter(filePath => !filePath.includes('common') && !filePath.includes('test')) // 排除common和test目录
     .map(filePath => {
       // ... 原有的路由生成逻辑
     });
   

效果验证 #

现在你新增一个页面文件夹（比如page-C下的page-c.vue），不需要修改任何路由配置，启动项目后直接访问/page-C就能看到这个页面了，完全省去了手动导入和配置的繁琐步骤！

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