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 跨域和ajax 跨域问题小结
Jul 01 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 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&&mysql)三
2006/10/09 PHP
聊天室php&mysql(四)
2006/10/09 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
总结一些js自定义的函数
2006/08/05 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
python 默认参数问题的陷阱
2016/02/29 Python
Python中static相关知识小结
2018/01/02 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
计算机应用专业自荐信
2014/07/05 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
政风行风评议心得体会
2014/10/21 职场文书
道歉的话怎么说
2015/05/12 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
python处理json数据文件
2022/04/11 Python