关于前端: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()
  }