VUE实现路由自动生成，根据src文件夹下（多级文件夹）所有.vue文件路径实现路由自动匹配生成

我们在写vue项目的时候，总是需要手动的去为每一个.vue文件去手动设置路由，这样做很麻烦，也会占用大量的时间去维护开发，那么有没有一种方法可以自动生成我们vue项目所需的路由？就想其他的前端框架那样？可以吗？

答案：可以

一、知识点及原理

1、原理：require.context
webpack提供了一个context方法来获取到目录下的所有文件，我们可以通过require.context方法拿到我们想要的指定文件夹下所有的vue文件。
webpack require.context官方文档
require.context有三个参数：

directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式

require.context()的返回值，有一个keys方法，返回的是个数组：
2、知识点：forEach、replace、push、module（语法）、Vue Router

二、具体实现方式

1、新建routes.js文件（router文件夹）

//routes.js
//递归获取src文件夹下的所有.vue文件
const files = require.context('@/', true, /.vue/)
let pages = {
    
    };
//生成路由规则
let generator = [];
files.keys().forEach(key => {
    
    
  pages[key.replace(/(\.\/|\.vue)/g, '')] = files(key).default;
});
//生成所有路由，并去除一级文件夹名称
Object.keys(pages).forEach(item => {
    
    
  let Rpath=item.replace(new RegExp('views','g'),"").replace(new RegExp('components','g'),"");
  if (item!=='App') {
    
    
    generator.push({
    
    
        path: Rpath,
        name:Rpath,
        meta:{
    
    
          active:Rpath
        },
        component: pages[item]
    })
  }
  
});
//将生成路由导入合并
const routes = [
  ...generator,
];
console.log('路由',routes)
export default routes;

2、新建index.js文件（router文件夹）

import Vue from 'vue'
import VueRouter from 'vue-router'
//router.js导入生成好的路由规则
import routerRoutes from "./routes";
Vue.use(VueRouter)
const router = new VueRouter({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routerRoutes,//导入自动生成的所有路由规则
  scrollBehavior: (to, from, savedPosition) => {
    
    
    if (savedPosition) {
    
    
      return savedPosition;
    } else {
    
    
      return {
    
    
        x: 0,
        y: 0
      };
    }
  },
});
export default router

通过上面的两步，我们就具体实现了vue项目的路由自动匹配生成，无论几级文件夹都可以自动匹配生成相关的路由规则，而我们如要使用，直接写文件地址即可跳转，上面只是初步实现了路由的自动生成，URL传值，meta定制，路由守卫这些还有待继续完善，如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；