关于vue-router的beforeEach无限循环的问题解决

 更新时间:2017年09月09日 15:34:05   作者:安木贝神  
本篇文章主要介绍了关于vue-router的beforeEach无限循环的问题解决,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近在使用vue-router的beforeEach钩子时候遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题
代码如下:

router.beforeEach((to, from, next) => {
 if(isLogin){
  next()
 }else{
  console.log('测试')
  next('login')
 }
})

结果chrome的debug中看到:

这个问题我是这样理解的:

router.beforeEach((to, from, next) => {
  if(true){
    next()
  }else{
    next('login')
  }
})
  • next() 表示路由成功,直接进入to路由,不会再次调用router.beforeEach()
  • next('login') 表示路由拦截成功,重定向至login,会再次调用router.beforeEach()

也就是说beforeEach()必须调用next(),否则就会出现无限循环,next() 和 next('xxx') 是不一样的,区别就是前者不会再次调用router.beforeEach(),后者会!!!

官网这样写的(主要是红线标记的那句!):

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解vue前后台数据交互vue-resource文档

    详解vue前后台数据交互vue-resource文档

    本篇文章主要介绍了vue前后台数据交互vue-resource文档,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Vue实现随机验证码功能

    Vue实现随机验证码功能

    这篇文章主要为大家详细介绍了Vue实现随机验证码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vuex actions异步修改状态的实例详解

    vuex actions异步修改状态的实例详解

    今天小编就为大家分享一篇vuex actions异步修改状态的实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 简单实现vue中的依赖收集与响应的方法

    简单实现vue中的依赖收集与响应的方法

    这篇文章主要介绍了简单实现vue中的依赖收集与响应的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • Vue使用axios添加请求头方式

    Vue使用axios添加请求头方式

    这篇文章主要介绍了Vue使用axios添加请求头方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue中的计算属性的使用和vue实例的方法示例

    vue中的计算属性的使用和vue实例的方法示例

    本篇文章主要介绍了vue计算属性的使用和vue实例的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • element-ui树形控件后台返回的数据+生成组织树的工具类

    element-ui树形控件后台返回的数据+生成组织树的工具类

    这篇文章主要介绍了element-ui树形控件后台返回的数据+生成组织树的工具类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Vue加入购物车判断token添加登录提示功能

    Vue加入购物车判断token添加登录提示功能

    加入购物车,是一个登录后的用户 才能进行的操作,所以需要进行鉴权判断,判断用户token是否存在,这篇文章主要介绍了Vue加入购物车判断token添加登录提示,需要的朋友可以参考下
    2023-11-11
  • vue监听路由变化时watch方法会执行多次的原因及解决

    vue监听路由变化时watch方法会执行多次的原因及解决

    这篇文章主要介绍了vue监听路由变化时watch方法会执行多次的原因及解决,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • 项目nginx部署到非根目录下vue配置方案

    项目nginx部署到非根目录下vue配置方案

    这篇文章主要介绍了项目nginx部署到非根目录下vue配置方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12

最新评论