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


Posted in Javascript onSeptember 09, 2017

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

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

结果chrome的debug中看到:

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

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

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-router的beforeEach无限循环的问题解决

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

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
canvas知识总结
Jan 25 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
js动态引入的四种方法
May 05 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
浅谈Express异步进化史
Sep 09 #Javascript
vue组件学习教程
Sep 09 #Javascript
weex里Vuex state使用storage持久化详解
Sep 09 #Javascript
Vue2几种常见开局方式详解
Sep 09 #Javascript
使用JS动态显示文本
Sep 09 #Javascript
深入理解ES7的async/await的用法
Sep 09 #Javascript
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
You might like
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
淘宝店策划方案
2014/06/07 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
课外活动实习计划
2015/01/19 职场文书
管理失职检讨书范文
2015/05/05 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android