不论是vue项目还是react项目,在添加新功能页面时,都需要进行手动配置路由表才会生效。
那么有没有可能在按照一定格式创建
文件之后,会自动添加到路由配置表
里呢?
答案当然是可以!
思路:
- 检索指定文件夹下的文件 ( require.context(directory, useSubdirectories, regExp) )
directory
{String} -读取文件的路径
useSubdirectories
{Boolean} -是否遍历文件的子目录
regExp
{RegExp} -匹配文件的正则- 将需要生成路由的文件创建在指定位置
以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;