关于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 相关文章推荐
javascript复制对象使用说明
Jun 28 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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
写一个用户在线显示的程序
2006/10/09 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
jQuery 操作XML入门
2008/12/25 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
学校门卫岗位职责
2014/03/16 职场文书
计算机专业求职信
2014/06/02 职场文书
个人融资协议书
2014/10/02 职场文书
化验室岗位职责
2015/02/14 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
python基础之文件处理知识总结
2021/05/23 Python
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python