携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
route写法
最近团队调整，进入到了一个新团队，突然接手了很多老的vue项目，每个项目都会有很多的路由页面。当有修改页面的需求，我需要通过router.js或者router文件夹去找对应的view页面，非常的影响开发体验，经过梳理，发现项目的路由页面基本都是这2种写法
第一种：把所有route对象都放到一个数组里面
// router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: '/a',
name: 'a',
component: () => import('@/views/a/index'),
},
{
path: '/b',
name: 'b',
component: () => import('@/views/b/index'),
},
{
path: '/c',
name: 'c',
component: () => import('@/views/c/index'),
},
]
const router = new VueRouter({
routes,
});
export default router;
这样的缺点是不够清晰，当页面过多的时候，找一个路由需要找半天，命名和格式也不易统一，在项目中使用webpack的魔法注释/* webpackChunkName:"lodash" */也容易出错。
第二种：把所有route对象拿出去，新建个js文件并导出，放到当前目录的文件夹下
// router/a.js
export default [
{
name: "a",
path:"/a/a",
component: () => import("@/views/a/a.vue"),
},
]
// router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import a from "./a.js";
import b from "./b.js";
import c from "./c.js";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [...a,...b,...c],
});
export default router;
这样的好处是每个模块清晰明了，比第一种好一些，一个模块下的所有路由都放到一个js文件中，但也存在问题，我们每次使用都需要手动import，并且还要在router里面浅拷贝了一次。
基于我们第二种方法优化
我们可以使用webpack提供的require.context() 函数来创建自己的 context，方法改造如下：
// router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const modulesFiles = require.context("./", true, /\.js$/)
const routes = modulesFiles.keys().reduce((prev, path) => prev.concat(modulesFiles(path).default || []), [])
const router = new VueRouter({routes});
export default router;
由于本文件引入的时候是undefined，所以会忽略过滤index.js中的代码，当每次我们新创建的模块的时候，我们只需要放心的在router目录下新增route（xxx.js）就好，可以减少重复开发时间，代码也变得简洁很多。
举一反三
当我们引用项目的utils、component、api、model，都可以使用这个方法，当然可能需要稍微改造一下，这样可以减少重复代码与提高开发效率，同时也起到精简项目的作用。
关于require.context()函数
我们可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。
Webpack 会在构建中解析代码中的 require.context() 。
语法如下：
require.context(
directory,
(useSubdirectories = true),
(regExp = /^\.\/.*$/),
(mode = 'sync')
);
示例：
require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。
require.context('../', true, /\.stories\.js$/)
// （创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。
关于webpack的requirecontext官方文档：webpack.docschina.org/guides/depe…
