在做這個動態路由的時候踩了很多坑，其中大部分是粗心了

動態菜單主要是導入的方式 import.meta.glob

參考：功能 | Vite 官方中文文檔

1、多層路由渲染（用3層路由做demo）

拿到接口的數據是后臺直接處理好的結構，但是在addRoute的時候發現其他層沒有添加上，這個地方就處理成一級目錄先把動態路由添加上再說

const whiteList = ['/login']// 免登錄白名單
const modules = import.meta.glob('../views/**/*.vue')router.beforeEach((to, from, next) => {document.title = `${to.meta.title}`const token=Cookies.get('token')if(token){if (to.path === '/login') {next()}else{if(store.state.menulist.length==0){$api.getUserData().then(res =>{if(res){if(res.code==0){let menulist=[];let newChildren=[];for(let i=0;i<res.data.menuWithCurrentRoleList.length;i++){let item=res.data.menuWithCurrentRoleList[i];let children=[];if(item.subMenuList){for(let j=0;j<item.subMenuList.length;j++){let items=item.subMenuList[j]items.path=items.router;let asarr=[];if(items.subMenuList){for(let jj=0;jj<items.subMenuList.length;jj++){let as=items.subMenuList[jj]let aobjs={"path":as.href, "name":as.moduleName, children:[],subMenuList:as.subMenuList,parent:3,"meta":{"title":as.name,},// component: () => import(`../views${as.href}.vue`),/**這個靜態路由只能本地使用**/component: modules[`../views${as.href}.vue`],}asarr.push(aobjs)newChildren.push(aobjs)}}let aobj={"path":items.href, "name":items.moduleName, children:[],parent:2,subMenuList:asarr,"meta":{"title":items.name,},//  component: () => import(`../views${items.href}.vue`),component: modules[/* @vite-ignore */`../views${items.href}.vue`],}children.push(aobj)newChildren.push(aobj)}}let obj={"path":item.href, "name":item.moduleName, children:[],parent:1,subMenuList:children,"meta":{"title":item.name,},// component: () => import(`../views${item.href}.vue`),component: modules[`../views${item.href}.vue`],}// console.log(obj.component,'====111===',item.href)menulist.push(obj)newChildren.push(obj)}store.dispatch('setMenulist',newChildren).then(() => {newChildren.forEach((route) => {router.addRoute('home',{ ...route });});next({ ...to, replace: true });}); }}})}else{next()}}}else{if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單，直接進入next()} else {next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁}}
})

說明：

import.meta.glob('../views/**/*.vue')

一個*表示文件，兩個**表示文件夾，.vue是說這個下面的所有.vue文件

我當時遇到的問題有點奇怪，有的路由菜單可以點擊，有的不可以，我當時粗心有2點。

1、文件名大小寫被我忽略了，沒有注意到，所以，一定要注意文件名有沒有錯

2、使用modules的時候我第三層的前面加了()=>然后在打印component的時候，?打印出來的是變量名

第一個框起來的是路徑錯誤，我沒有這個文件

第二個框起來的是正確的，路徑正確也可以正常訪問

第三個錯誤的，因為我加了component:()=>modules，實際不需要加，我當時沒有注意到這個地方，找了好久的問題?

最后：如果有好的多層動態菜單處理方法，大家可以告訴我呀。