根据文件夹下的route.js文件自动生成route路由
在utils文件夹下新建route.js文件
该文件用以遍历模块下的页面,将函数写在其中,
遍历页面所在文件夹
require.context函数可以帮助我们遍历目标文件夹
let reqs = require.context("@/modules",true,/route\.js$/)
第一个参数为目标文件夹,第二个参数为是否遍历子文件夹,第三个参数为匹配表达式(正则)
利用此函数,进行文件夹的深层次遍历,获取每个文件夹下的route.js文件。
将遍历所得结果通过递归转化为路由
let analysis = async function (req, p){
// 建立一个正则用以匹配
let reg = new RegExp('^' + p.replace('/route.js', '') + '\/[a-zA-Z]+\/route\.js$')
for(let k=0;k<reqs.keys().length;k++){
let dpath = reqs.keys()[k]
if(reg.test(dpath)){
let getModule = () => import(`@/modules/${dpath.replace('./','')}`)
let cReq = await getModule()
cReq = cReq.default
if(req.children){
req.children.push(cReq)
}else{
req.children = [cReq]
}
await analysis(cReq, dpath)
}
}
}
util/route.js代码
import {setRoutes} from "@/router"
export function getLocalRoute = async function (){
let routes = []
const reqs = require.context("@/modules",true,/route\.js$/)
// 递归加载子路由
let analysis = async function (req, p){
// 建立一个正则用以匹配
let reg = new RegExp('^' + p.replace('/route.js', '') + '\/[a-zA-Z]+\/route\.js$')
for(let k=0;k<reqs.keys().length;k++){
let dpath = reqs.keys()[k]
if(reg.test(dpath)){
let getModule = () => import(`@/modules/${dpath.replace('./','')}`)
let cReq = await getModule()
cReq = cReq.default
if(req.children){
req.children.push(cReq)
}else{
req.children = [cReq]
}
await analysis(cReq, dpath)
}
}
}
// 获取一级目录
for(let i=0;i<reqs.keys().length;i++){
let path = reqs.keys()[i]
if(/^\.\/[a-zA-Z]+\/route\.js$/.test(path)){
let getModule = () => import(`@/modules/${path.replace('./','')}`)
let req = await getModule()
req = req.default
await analysis(req, path)
routes.push(req)
}
}
// 添加404界面,404界面位置必须在route末尾
routes.push({path: '*',redirect: '/404',hidden: true})
// 调用setRoutes设置router路由
setRoutes(routes)
}