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()
  }

项目地址
https://github.com/zxc1989092...