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代码
Aug 05 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
Element Steps步骤条的使用方法
Jul 26 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
浅析javascript的return语句
2015/12/15 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
python对象与json相互转换的方法
2019/05/07 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
群胜软件Java笔试题
2012/09/29 面试题
教师自荐信范文
2013/12/09 职场文书
运动会广播稿150字
2014/02/19 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
人力资源职位说明书
2014/07/29 职场文书
合伙经营协议书范本
2014/09/13 职场文书
学生检讨书范文
2015/01/27 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
vue中data里面的数据相互使用方式
2022/06/05 Vue.js