路由守卫中next() next({path: '/'}) 和next({...to}) next({ ...to, replace: true })区别
来源:8-6 动态路由原理讲解
课里课外
2021-01-31
老师,最近我在项目中遇到比较很奇怪的问题,就是正常登陆页面点击菜单都没问题,但是只要刷新页面就会出现白屏,换个链接又可以了。比如登陆后点击/book/list菜单没问题,刷新一下页面白屏了,然后把链接改成/book/create又出来了,再刷新又白屏了。
结果一直排查,发现就是路由守卫那里的方法,直接使用next()不行,要改用next({ …to, replace: true })。虽然问题解决了,但是很奇怪,next({…to})不是和next()同个意思吗?replace: true 只是不记录浏览器历史跳转里,加不加没关系呀?
router.beforeEach(async(to, from, next) => {
NProgress.start()
document.title = getPageTitle(to.meta.title)
const hasToken = getToken()
console.log(from, to)
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
const hasPermission = store.state.permission.status
console.log(hasPermission)
if (hasPermission) {
next()
} else {
await Promise.all([store.dispatch('user/getInfo'), store.dispatch('permission/getPermission')])
// next() 问题就在这里,直接next不行,改用下面的就可以了。
next({ ...to, replace: true })
NProgress.done()
}
}
// ...
}
写回答
1回答
-
扬_灵
2021-02-01
同学你好,你可以看一下这篇文档https://blog.csdn.net/qq_41912398/article/details/109231418
00
相似问题