vue roture路由拦截遇到的问题

最新推荐文章于 2021-10-12 15:44:28 发布

_Delete

最新推荐文章于 2021-10-12 15:44:28 发布

阅读量490

点赞数 3

分类专栏： VUE 文章标签： VUE vue-router beforeEach 死循环

本文链接：https://blog.csdn.net/hao452378531/article/details/91986988

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue roture路由拦截使用钩子函数beforeEach
一开始想想个测试的拦截

router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    next()
  } else {
    if (!store.state.userName || store.state.userName === '') { // 假设没登录
      next({path: '/Login'})
    } else {
      next()
    }
  }
})

结果会报错，出现死循环
在这里插入图片描述
最后解决方案

router.beforeEach((to, from, next) => {
  if (to.path === '/' || to.path === '/Login') { //  to.path === '/Login' 是跳出死循环的关键
    next()
  } else {
    if (!store.state.userName || store.state.userName === '') { // 假设没登录
      next({path: '/Login'})
    } else {
      next()
    }
  }
})