vue 自动化路由实现代码

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

let routers = require.context('VIEWS', true).keys()
console.log(routers)

import Layout from 'VIEWS/layout/index'
/**
 * 正则 首先匹配./ ,然后一级目录，不包含components的二级目录，以.vue结尾的三级目录
 */
let routers = require.context('VIEWS', true, /\.\/[a-z]+\/(?!components)[a-z]+\/[a-z]+\.vue$/i).keys()
let indexRouterMap = {} // 用来存储以index.vue结尾的文件，因为index.vue是列表文件，需要加入layout（我们的菜单）,需要keepAlive，需要做权限判断
let detailRouterArr = [] // 用来存储以非index.vue结尾的vue文件，此类目前不需要layout
routers.forEach(item => {
 const paths = item.match(/[a-zA-Z]+/g) //paths中存储了一个目录，二级目录，文件名
 const routerChild = { //定义路由对象
  path: paths[1],   
  name: `${paths[0]}${_.upperFirst(paths[1])}`,  //upperFirst,lodash 首字母大写方法
  component(resolve) {
   require([`../../views${item.slice(1)}`], resolve)
  },
 }
 if (/index\.vue$/.test(item)) { //判断是否以index。vue结尾
  if (indexRouterMap[paths[0]]) {  //判断一级路由是否存在，存在push二级路由，不存在则新建
   indexRouterMap[paths[0]].children.push(routerChild)
  } else {
   indexRouterMap[paths[0]] = {
    path: '/' + paths[0],
    component: Layout,
    children: [routerChild]
   }
  }
 } else {   //不以index.vue结尾的，直接添加到路由中
  detailRouterArr.push({
   path: item.slice(1, -4),  //渠道最前面的 . 和最后的.vue
   name: `${paths[0]}${_.upperFirst(paths[1])}${_.upperFirst(paths[2])}`,
   component(resolve) {
    require([`../../views${item.slice(1)}`], resolve)
   },
   meta: {
    noCache: true,  //不keepAlive
    noVerify: true  //不做权限验证
   }
  })
 }
})
export default [
 ...Object.values(indexRouterMap),
 ...detailRouterArr,
 /**
  * dashboard单独处理下
  */
 {
  path: '',
  component: Layout,
  redirect: 'dashboard',
  children: [
   {
    path: 'dashboard',
    component: () => import('VIEWS/dashboard/index'),
    name: 'dashboard',
    meta: { title: '首页', noCache: true, noVerify: true }
   }
  ]
 },
]