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