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 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
JS面向对象编程浅析
Aug 28 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
element-ui 本地化使用教程详解
Oct 28 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
建立动态的WML站点(一)
2006/10/09 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
Python多线程获取返回值代码实例
2020/02/17 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
Order by的几种用法
2013/06/16 面试题
物业经理求职自我评价
2013/09/22 职场文书
企业治理工作自我评价
2013/09/26 职场文书
幼儿园家长评语
2014/02/10 职场文书
红旗方阵解说词
2014/02/12 职场文书
总会计师岗位职责
2014/02/19 职场文书
黄金搭档广告词
2014/03/21 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android