获取当前所有vue文件，动态路由数据库配置错误处理

//获取当前所有vue文件 第一个参数是你想获取文件夹下的vue，我这边是src下的components
let requireComponent = require.context(’@/components’, true, /.vue/)

//过滤路由
function filterAsyncRouter(asyncRouterMap) {
  //获取当前所有vue文件
  let requireComponent = require.context('@/components', true, /\.vue/)
  //遍历后台传来的路由字符串，转换为组件对象
  const accessedRouters = asyncRouterMap.filter((route) => {
    let isExist = false
    if (route.component) {
      if (route.component === 'home') {
        //Layout组件特殊处理
        route.component = home
      } else {
        let path = route.path.slice(1)
        // 遍历出每个组件的路径
        requireComponent.keys().forEach((filePath) => {
          //获取文件的方法
          let dataFile = filePath.split('/')
          // console.log(dataFile.length)
          dataFile = dataFile[dataFile.length - 1].split('.')[0]
          // let names = dataFile.split('.')[0]
          
          if (path.toLowerCase() === dataFile.toLowerCase()) {
            isExist = true
          }
        })
        if (isExist) {
          route.component = _import(route.component)
        } else {
          //路由对应不上文件
          return false
        }
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })
  return accessedRouters
}

上面这个代码主要是做校验，如果我们动态生成路由的时候，后台数据库的地址写错了，我们这边获取本地文件夹的全部路由，然后一个个去比对，如果名字不一样，就不存到路由表，点击的时候就跳转404