刷新页面时跳转404或者空白页,我的原因是刷新页面后动态添加的路由表信息丢失,我在获取到后存在了sessionStorage中,但在刷新后还是丢失,
解决办法:在判断页面是刷新时,重新拉取数据
路由表信息
path: '/Dep',
name: 'Dep',
icon: 'el-icon-location',
component: Layout,
redirect: '/department',
meta: {
requireAuth: true,
showMenu: true,
title: '部门管理',
},
children: [{
path: '/department',
name: 'Department',
icon: 'el-icon-s-promotion',
component: () => import('@/views/personnel/department.vue'),
meta: {
requireAuth: true,
showMenu: true,
title: '部门管理',
}
}]
},
路由
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 requireAuth参数必须存在
if (sessionStorage.getItem("token")) { // 判断本地是否存在token
//已登录 有token 放行
//这里判断是否拉取了菜单,如果没有这一步,控制台会一直报路由重复,按理说这里应该是根据后台返回值来判断,但我这里貌似没看到,就自己在vuex中存了一组数据,isDept :false;
if(store.state.isDept == true ){ next(); return }//等于true就说明拉取了菜单
//利用vuex中的方法,处理后台传过来的数据,拼接成标准路由格式
store.
dispatch("getDynamicRouter",JSON.parse(sessionStorage.getItem('permissionList')))
.then(res => {
//进行路由拼接,并进行路由动态加入 !!注意addroutes方法不可缺
store.dispatch("getDiyRouter").then(res => {
//动态添加路由
router.addRoutes(store.state.routeList)
//添加完成后,让.isDept变成true,说明拉取了菜单,再进行页面跳转时就不会重新拉取路由列表了,
store.state.isDept = true;
//添加完成后,一定要进行next(),不然会进行死循环
next()
});
});
} else {
// 未登录,跳转到登陆页面
next({
path: '/login'
})
}
} else {
//无需登录权限页面控制
if (to.name == null) {
//这里是页面刷新的时候,重新拉取路由数据,方法同上
if (window.performance.navigation.type == 1) {
if(store.state.isDept == true){ next(); return }
store.dispatch("getDynamicRouter", JSON.parse(sessionStorage.getItem('permissionList')))
.then(res => {
store.dispatch("getDiyRouter").then(res => {
store.state.isDept = true;
router.addRoutes(store.state.routeList)
//唯一的区别在这里,
next({...to, replace: true})
});
});
} else {
next({
path: '/404'
})
}
} else {
next();
}
}
});