踩坑记录:[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()
})