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特效,页面下雪的小例子
Jun 17 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 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
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP5.3新特性小结
2016/02/14 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
javascript基本语法
2016/05/31 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
python 爬取微信文章
2016/01/30 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
踏青活动策划方案
2014/08/19 职场文书
英文演讲稿开场白
2014/08/25 职场文书
未婚证明范本
2015/06/15 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python