问题描述：vue-router 动态加载路由，可以实现。但是刷新页面就不显示了，路由的数据，保存在sessionStorage中，刷新后进行了重新加载。但是组件就是不显示，测试发现，路由是添加成功的，但是就是不显示，就看到一个空白页面。
代码如下：
if (to.name === 'Login') {
next();
} else {
if (to.meta.requireAuth) { // 验证用户是否登录
if (sessionStorage.getItem('isLogin')) {
if(store.getters.getIsLogin && store.getters.getRefresh){
// 如果用户登录了，页面refresh值为true，则重新添加路由
store.dispatch('setNoRefresh'); //重新刷新设置为false
DynamicAddRouter();//添加动态路由的方法
next()
}else{
next();
}
} else {
next({
path: '/login'
})
}
} else {
if(store.getters.getRefresh){
console.log("加载动态路由")
// 如果用户登录了，页面refresh值为true，则重新添加路由
store.dispatch('setNoRefresh'); //重新刷新设置为false
DynamicAddRouter();//添加动态路由的方法
next()
}else{
next();
}
}解决方案：动态加载路由后，将next()方法，改为next({ ...to, replace: true })
注：只将动态路由加载后的next方法，进行改变，如果全部改变，将进入到死循环
代码如下：
if (to.name === 'Login') {
next();
} else {
if (to.meta.requireAuth) { // 验证用户是否登录
if (sessionStorage.getItem('isLogin')) {
if(store.getters.getIsLogin && store.getters.getRefresh){
// 如果用户登录了，页面refresh值为true，则重新添加路由
store.dispatch('setNoRefresh'); //重新刷新设置为false
DynamicAddRouter();//添加动态路由的方法
next({ ...to, replace: true })
}else{
next();
}
} else {
console.log(sessionStorage.getItem('isLogin'))
next({
path: '/login'
})
}
} else {
if(store.getters.getRefresh){
console.log("加载动态路由")
// 如果用户登录了，页面refresh值为true，则重新添加路由
store.dispatch('setNoRefresh'); //重新刷新设置为false
DynamicAddRouter();//添加动态路由的方法
next({ ...to, replace: true })
}else{
next();
}
}
解析：replace属性为true的时候可以让链接在跳转的时候不会留下历史记录。
扫一扫
560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
