从后台读取角色menus对象,采用addRoutes方式增加路由,登出后换用户登录继续addRoutes路由如果存在重复的会报
vue-router.common.js?1ecf:18 [vue-router] Duplicate named routes definition: { name: "top-menu", path: "" }
并且报错(据观察是router不存在跳转不到)
TypeError: Cannot read property 'beforeRouteEnter' of undefined
如果刷新页面,这两个错误都不会
手摸手解决方案是 location.reload()登出重新加载页面(重新加载页面用户体验不好,目前是直接跳转的)
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
}
我的代码如下(多粘点对做权限的同学有参考意义)
main.js
// 不重定向白名单
const whiteList = ['/login', ];
router.beforeEach((to, from, next) => {
let url = to.path;
if (sessionStorage.getItem("tokenList")) {
const menus = JSON.parse(sessionStorage.getItem('menus'));
// 路由是否加载完成标识
if(!store.getters.routerLoadDone){
if (menus && menus.length > 0) {
store.dispatch('GenerateRoutes', { menus }).then(() => { // 生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({