[转][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

这篇关于[转][vue-router] Duplicate named routes definition动态路由addRoutes的踩坑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！