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

2022-04-02 20:34:48 阅读：203 来源： 互联网

标签：definition named vue sessionStorage addRoutes Aside window router 路由

问题描述：
　　第一次进入页面，左侧静态路由和动态路由列表均能正常显示，但点击左侧其他路由后浏览器报警告[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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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