问题:

控制台报错Duplicate named routes,一开始登录,切换用户时都会出现

环境:

vue: 2.6.6 element-ui: 2.10.1 动态权限控制路由

分析:

报错的意思是路由重复定义。查看静态路由并没有出现重复,打断点发现,动态添加路由执行了多次,增加变量控制只添加一次动态路由。解决登录报错,没有解决切换用户报错。切换用户时router对象并没有清空上次动态添加的路由,导致切换用户登录时动态添加路由报错。切换用户时,用户权限会变,所有必须再次动态添加路由。问题关键是切换用户时把router的动态路由清空,重现添加。

$route.matched

  • 类型: Array<RouteRecord>

一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

所以重新给Router.matcher赋值可以达到更新路由配置的目的

router.$addRoutes = (params) => {
  router.matcher = new Router({
    mode: 'history',
    routes: [...StaticBaseRouter],
  }).matcher;
  router.addRoutes(params)
}

用$addRoutes代替原有的addRoutes,StaticBaseRouter是原有的静态路由

Logo

前往低代码交流专区

更多推荐