每次创建页面之后,都需要手动引入模块,创建路由,很麻烦。
这里使用webpack中的require.context来实现创建页面之后,自动加载路由。
同时,因为编写加载路由设定了部分规则,只有遵守该规则才能将路由加载进去,有助于团队命名规范的限制。
require.context
用于自动加载某一目录下,符合我们自定义规则的文件
项目结构
子路由编写
index.route.js
/**
* require.context
* 返回一个方法
* 第一个参数为需要查找的目录
* 第二个参数为是否需要遍历子文件夹
* 第三个参数为自定义规则
*/
var r = require.context('./pages',true,/.vue/);
var arr = [];
//获取引入的资源['./mode1.index.vue','./mode1.second.vue']
r.keys().forEach((key)=>{
var _keyArr = key.split(".");
if(key.indexOf("index")!=-1){
arr.push({
path:_keyArr[1],
component:r(key).default //key对应的组件
})
}else{
arr.push({
path:_keyArr[1]+"/"+_keyArr[2],
component:r(key).default
})
}
})
export default arr;
总路由编写
router/index.js
import Vue from 'vue'
import Router from '../myrouter'
Vue.use(Router)
var r = require.context("../components",true,/\.route\.js/)
var arr = [];
r.keys().forEach((item)=>{
arr = arr.concat(r(item).default);
})
export default new Router({
mode: "hash",//模式
routes: [
...arr
]
})