其他分享
首页 > 其他分享> > [转][vue-router] Duplicate named routes definition动态路由addRoutes的踩坑

[转][vue-router] Duplicate named routes definition动态路由addRoutes的踩坑

作者:互联网

问题描述
  第一次进入页面,左侧静态路由和动态路由列表均能正常显示,但点击左侧其他路由后浏览器报警告[vue-router] Duplicate named routes definition…,并且跳转失败。

  动态路由的概念:
  一般来说是通过后端接口返回拿到数据,不同人不同权限,返回的数据也不同。然后在路由守卫router.beforeEach 中进行添加路由。

解决方案
  创建本地存储一个字段,第一次来的时候正常增加addRoutes,增加后立刻改变本地存储状态,并且增加判断,所以再次进入其他路由时就不会触发addRoutes了

  解决代码:
  在permission.js文件中:

window.sessionStorage.setItem('Aside', '0')
router.beforeEach((to, from, next) => {
  if (window.sessionStorage.getItem('Aside') === '0') {
    store.dispatch('GenerateRoutes').then(accessRoutes => {
      // 根据roles权限生成可访问的路由表
      window.sessionStorage.setItem('Aside', '1')
      router.addRoutes(accessRoutes) // 动态添加可访问路由表
      next({ replace: true }) // hack方法 确保addRoutes已完成
    })
  }
   next()
})

 

————————————————
版权声明:本文为CSDN博主「百事可口」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_38594056/article/details/121541879

标签:definition,named,vue,sessionStorage,addRoutes,Aside,window,router,路由
来源: https://www.cnblogs.com/rainbow70626/p/16093820.html