问题描述:实现动态路由时报错
动态路由代码:
dynamicMenu(state, payload) {
//通过vite-glob导入文件
const modules = import.meta.glob('../views/**/**/*.vue')
function routerSet(router) {
router.forEach((route) => {
//判断没有子菜单,拼接路由数据
if (!route.children) {
const url = `../views${route.meta.path}/index.vue`
//拿到获取vue组件
route.component = modules[url]
} else {
routerSet(route.children)
}
})
}
routerSet(payload)
state.routerList = payload
},
输出路由数据,component:undefined
排查了好久好久,才找到原因:路径匹配错误。当前文件的路径名称需要与获取的路由数据路径名一致,特别需要注意路径名称大小写!!!
我的路径名:
路由数据的路径名:
大小写的差别导致路径匹配失败
总结:动态路由加载,匹配路径时注意路径名称保持一致(包括大小写,斜杠方向,相对路径问题)