[JavaScript知识库]使用require.context实现前端工程自动化路由vue项目

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 => {
    var key=element.split('.') //文件名分割成数组
    console.log(key) //['', '/mode', 'index', 'vue']
    if(element.indexOf('index')>-1){//如果是index页
        arr.push({
          path:key[1],//路由路径
          component:r(element).default
        })
    }else{//其他页面
        arr.push({
          path:key[1]+'/'+key[2],
          component:r(element).default
        })
    }
});

console.log(arr)

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 => {
    var key=element.split('.')
    if(element.indexOf('index')>-1){
        arr.push({
          path:key[1],
          component:r(element).default
        })
    }else{
        arr.push({
          path:key[1]+'/'+key[2],
          component:r(element).default
        })
    }
});
console.log(arr)


const router = new VueRouter({
  base: process.env.BASE_URL,
  routes : arr
})

export default router