在做这个动态路由的时候踩了很多坑，其中大部分是粗心了

动态菜单主要是导入的方式 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，实际不需要加，我当时没有注意到这个地方，找了好久的问题 

最后：如果有好的多层动态菜单处理方法，大家可以告诉我呀。