vue3项目实现动态配置菜单（动态添加路由）1.addRoutevue3去掉了AddRoutes，只能使用addRoute添加路由，所以需要循环添加。所有道路数据都是后台获取的，直接循环生成菜单。然后我们在main.js中通过routeguard添加动态路由。addRoute可以添加如下格式的路由，子组件可以直接添加"data":[{"id":1000,"parentId":-1,"icon":"iconquanxian","name":"OrganizationalStructure","path":"/system","component":()=>import(`@/${url}`),//@/view/framework/Framework.vue"redirect":null"children":[{"id":1100,"parentId":1000,"icon":"iconyonghuguanli","name":"用户管理","path":"/system/user","component":()=>import(`@/${url}`),"redirect":null}],2.组件字段问题，无法动态添加路由，报地址错误。component字段，我遇到的问题，直接在url中导入'@/'，会报错，无法识别地址，所以只能拼接添加路由。3、main.js中刷新路由失效问题动态配置路由，数据从接口获取，通过next({...to,replace})解决刷新后路由失效问题。//路由保护letregisterRouteFresh=truerouter.beforeEach(async(to,from,next)=>{letres=awaitapi.parentMenu()letarr=[]res.data.data.filter((value,index)=>{letchild=[]if(value.children&&value.children.length){value.children.filter((val,i)=>{child.push({name:val.routeName,path:val.path,component:()=>import(`@/${val.component}`)})})}arr.push({name:value.routeName,redirect:value.redirect,path:value.path,component:()=>import(`@/${value.component}`),children:child})})//如果是第一次或者刷新界面，next(...to,replace:true)会循环遍历路由，如果to找不到对应的路由，那么他会再次执行beforeEach((to,from,next))，直到找到对应的路由。我们的问题是页面刷新后，数据是异步获取，直接执行next()感觉路由已经添加了但是是在next()之后执行的，所以无法导航到对应的响应接口。这里使用变量registerRouteFresh变量来记录，直到找到对应的路由，将其值设置为false然后通过else执行next()，整个过程会去到之后，添加路由。if(registerRouteFresh){arr.forEach((value,index)=>{router.addRoute(value)})next({...to,replace:true})registerRouteFresh=false}else{next()}项目地址https://github.com/zxc1989092...
