关于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 toggle()设置CSS样式
Nov 05 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
js 获取、清空input type="file"的值(示例代码)
Dec 24 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
jQuery实现元素的插入
Feb 27 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
浅谈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
一个分页的论坛
2006/10/09 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python之import机制详解
2014/07/03 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
django模板结构优化的方法
2019/02/28 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
python list多级排序知识点总结
2019/10/23 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
类的核心特性有哪些
2014/01/01 面试题
外企财务年会演讲稿
2014/01/03 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Python实现照片卡通化
2021/12/06 Python
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python