[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()
})