vue实现路由自动添加

不论是vue项目还是react项目，在添加新功能页面时，都需要进行手动配置路由表才会生效。

那么有没有可能在按照一定格式创建文件之后，会自动添加到路由配置表 里呢？

答案当然是可以！

思路：

1. 检索指定文件夹下的文件 （ require.context(directory, useSubdirectories, regExp) ）
   directory{String} -读取文件的路径
   useSubdirectories{Boolean} -是否遍历文件的子目录
   regExp{RegExp} -匹配文件的正则
2. 将需要生成路由的文件创建在指定位置

以vue项目为例，代码很low，不要吐槽

1. 改造router/index.js

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = []; // 路由配置表

require
  .context("../views", true, /\.vue$/) 
  .keys()
  .map((item) => {
    let path = item.slice(1).replace(".vue", "").toLowerCase();
    routes.push({
      path,
      name: path.slice(1),
      component: () => import(`../views${item.slice(1)}`),
    });
  });

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

2. 将需要生成路由的.vue文件创建在views目录下即可