以下两种报错分别表示:
超过最大调用堆栈大小;(路由死循环问题)
错误:重定向时,从“/主页/主页”到“/列表/列表”通过导航守卫。(重定向问题)
在这里插入图片描述
以上两种都是路由导致的报错,我们先从第一个报错分析,在报错的文件中找到 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版本就行了,但我这边也没效果。

希望对大家有帮助~~~

Logo

前往低代码交流专区

更多推荐