vue3|vue3 动态添加路由（addRoute）生成菜单，解决刷新路由失效问题。 vue3动态添加路由（addRoute）生

vue3项目中实现动态配置菜单（动态添加路由）
1、addRoute
vue3中去掉了addRoutes只能使用addRoute添加路由，那么我们就需要循环添加。路有数据都是从后台获取，直接循环生成菜单，然后我们在main.js中通过路由守卫添加动态路由
addRoute可以添加如下格式的路由，子组件可以直接添加

"data": [{ "id": 1000, "parentId": -1, "icon": "iconquanxian", "name": "组织架构", "path": "/system", "component": ()=>import(`@/${url}`), // @/view/framework/Framework.vue "redirect": null "children": [{ "id": 1100, "parentId": 1000, "children": [], "icon": "iconyonghuguanli", "name": "用户管理", "path": "/user", "component": ()=>import(`@/${url}`), "redirect": null }],

2、component字段问题，没法动态添加路由，地址报错。
component字段，我遇到的问题，直接把‘@/’配置到url中引入，会报错，没法识别地址，所以只用拼接的方法就可以添加路由了
3、刷新路由失效问题
main.js中动态配置路由，数据是从接口中获取的，通过next({...to, replace})解决刷新后路由失效的问题。

// 路由守卫 let registerRouteFresh = true router.beforeEach(async (to, from, next) => { let res = await api.parentMenu() let arr = [] res.data.data.filter((value, index) => { let child = [] 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() }

【vue3|vue3 动态添加路由（addRoute）生成菜单，解决刷新路由失效问题。】项目地址
https://github.com/zxc1989092...