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 相关文章推荐
fmt:formatDate的输出格式详解
Jan 09 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
使用JavaScript破解web
Sep 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
三个类概括PHP的五种设计模式
2012/09/05 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python中的类与类型示例详解
2019/07/10 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
高三学习决心书
2014/03/11 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
大学推普周活动总结
2015/05/07 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
MySQL索引是啥?不懂就问
2021/07/21 MySQL