require.context
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
在components/pages目录下定义文件,
注:以这种方式生成路由的话,路由路径是以你文件名决定的,所以文件名要好好规划
/**
* @parms directory {String} -读取文件的路径
* @parms useSubdirectories {Boolean} -是否遍历文件的子目录
* @parms regExp {RegExp} -匹配文件的正则
*/
require.context(directory,useSubdirectories,regExp)
//示例代码
//获取当前目录下所有以.vue结尾的文件
var r=require.context('@/components/pages',true,/.vue/)
遍历生成路由对象
var arr=[]
r.keys().forEach(element => {
let key = element.split('/')[element.split('/').length-1].split('.')
key.pop()
arr.push({
path:'/' + key.join('/'),
component:r(element).default
})
});
console.log(arr)
以上就是自动化路由的全部内容
最后贴上完整代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
var r=require.context('@/components/pages',true,/.vue/)
var arr=[]
r.keys().forEach(element => {
let key = element.split('/')[element.split('/').length-1].split('.')
key.pop()
arr.push({
path:'/' + key.join('/'),
component:r(element).default
})
});
console.log(arr)
const router = new VueRouter({
base: process.env.BASE_URL,
routes : arr
})
export default router