关于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 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jquery的index方法实现tab效果
Feb 16 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
javascript获取元素的计算样式
May 24 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之数据库操作详解及乱码解决!
2007/01/02 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
javascript中对对层的控制
2006/12/29 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
党课知识竞赛主持词
2014/04/01 职场文书
中学生英语演讲稿
2014/04/26 职场文书
绿色出行口号
2014/06/18 职场文书
挂靠协议书
2015/01/27 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS