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 = truerouter.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()  }