vue 中 beforeRouteEnter 死循环的问题


Posted in Javascript onApril 23, 2019

如果在 vue 组件的 beforeRouteEnter 钩子函数中调用 API 请求,会出现循环执行的问题:

beforeRouteEnter(to, from, next) {
   login().then(() => {
    next({ name: 'home' });
  }).catch(() => {
   next();
   });
  },

上面的代码会出现无限循环调用的问题,可能是API还没有请求完成,又一次进入 router,调用了 beforRouterEnter 的原因,解决办法加一个变量,在调用API之前判断一下:

let request = false; 
  beforeRouteEnter(to, from, next) {
  if (request) {
   next();
   return;
  }
   request = true;
   login().then(() => {
   next({ name: 'home' });
  });
 },

ps:关于vue中beforeRouteEnter使用的误区

在写项目的时候偶然遇到了一个问题,在进入一个城市选择页面时,城市列表总是需要一秒后才能加载出来,出现了页面抖动,在解决这个问题时想到了路由中的beforeRouteEnter方法,在路由跳转前加载数据,在网上发现有博客说可以使用如下写法来解决这个问题:

vue 中 beforeRouteEnter 死循环的问题

这样写是毫无效果的, 经过仔细分析官方文档后发现next中的函数执行在页面mounted之后,所以这种方法时是不正确的。还不如直接将数据获取绑定到create钩子上。

正确写法如下:

vue 中 beforeRouteEnter 死循环的问题

这样就在跳转前获取到了数据,改写后完全解决了页面抖动的问题。

总结

以上所述是小编给大家介绍的vue 中 beforeRouteEnter 死循环的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
JavaScript中跨域问题的深入理解
Mar 04 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 #Javascript
vue watch关于对象内的属性监听
Apr 22 #Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 #Javascript
对于防止按钮重复点击的尝试详解
Apr 22 #Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 #Javascript
详解Vue依赖收集引发的问题
Apr 22 #Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 #Javascript
You might like
如何用php获取程序执行的时间
2013/06/09 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
前端构建工具之gulp的语法教程
2017/06/12 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
Python中的推导式使用详解
2015/06/03 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
详解python程序中的多任务
2020/09/16 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
《石榴》教学反思
2014/03/02 职场文书
就业协议书范本
2014/04/11 职场文书
会计专业自荐书
2014/07/08 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
协会周年庆活动方案
2014/08/26 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2014司机年终工作总结
2014/12/05 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js