vue路由事件beforeRouteLeave及组件内定时器的清除方法


Posted in Javascript onSeptember 29, 2018

背景

之前在做ADTS项目的时候,首页是一个实时监测的页面,需要每隔5秒更新一次数据,而业务逻辑上的需要先请求告警列表的接口的,从告警列表中拿到数据再去获取其他的数据,所以我在获取告警列表的方法中增加了一个定时器。

vue路由事件beforeRouteLeave及组件内定时器的清除方法

vue路由事件beforeRouteLeave及组件内定时器的清除方法

最开始我是将定时器声明在组件内部的(由于页面不多,数据关联也不太强,所以项目中没有使用store进行数据管理),后来清除的时候发现无法清除,后来索性声明到window下了。然后在组件内部写了如下代码:

vue路由事件beforeRouteLeave及组件内定时器的清除方法

发现也没能将定时器清除,后来走debug发现根本就没有进到这个方法中去,然后就去问同事有没有遇到过类似的问题。

解决

后来同事建议我将路由离开事件的代码放到配置了路由的界面中,我试了一下,果然好使,定时器成功清除。

总结

vue的beforeRouteEnter和beforeRouteLeave都要写在配置了路由的界面中才能出发,写在界面所调用的组件内部无法触发。

vue如果没有使用store的话设置定时器可以直接声明在window下,便于清除。

以上这篇vue路由事件beforeRouteLeave及组件内定时器的清除方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
js this 绑定机制深入详解
Apr 30 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 #Javascript
iview同时验证多个表单问题总结
Sep 29 #Javascript
浅谈关于iview表单验证的问题
Sep 29 #Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 #Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 #Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 #Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
使用数据库保存session的方法
2006/10/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python Xpath语法的使用
2020/11/26 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
软件测试常见笔试题
2012/02/04 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS