以下两种报错分别表示:
超过最大调用堆栈大小;(路由死循环问题)
错误:重定向时,从“/主页/主页”到“/列表/列表”通过导航守卫。(重定向问题)
以上两种都是路由导致的报错,我们先从第一个报错分析,在报错的文件中找到 permission.js文件,该文件是我设置全局的路由守卫
咋一看,有token继续,没有返回到login页面没有什么问题呀!但是问题就出在这个返回login页面,为了看的更清楚,我们在next(’/login’)上面打印发现
没错,它出来了,死循环了,情况就为每次进入login页面都经过路由守卫,又回到login,这般死循环;
这时我使用了路由守卫的vm参数,如下
if (token) {
next()
} else {
console.log('???')
next(vm => vm.$router.replace('/login'))
}
这时进入正常的login页面,没有问题,好像没事了,但是这是我删除存储的token后,刷新,打印处 ???, 但是没有进入login页面,我傻了。next()这段失效了。。。
最后,编辑了一道严(rong)密(za)的路由守卫逻辑,一同解决了上面两个路由报错问题,代码如下:
import router from './router'
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('Token')
if (token && to.path !== '/login') {
// 有token 但不是去 login页面 通过
next()
} else if (token && to.path === '/login') {
// 有token 但是去 login页面 不通过 重定向到首页
next('/')
} else if (!token && to.path !== '/login') {
// 没有token 但不是去 login页面 不通过(未登录不给进入)
next('/login')
} else {
// 剩下最后一种 没有token 但是去 login页面 通过
next()
}
})
总结
一般遇到以上这两种路由报错,普遍是路由逻辑的问题,结合报错信息与报错文件,从路由表,路由守卫等文件下手,查看是否是逻辑有问题,这里重点点名 看看是否是因为next(’/login’)导致的问题。虽然在之前的项目中,我一直未遇到过,有网友说将vue-router 3.2.0版本的降低为3.0.7版本就行了,但我这边也没效果。
希望对大家有帮助~~~