//获取当前所有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