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 相关文章推荐
JQuery小知识
Oct 15 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
jQuery事件用法详解
Oct 06 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
微信小程序排坑指南详解
May 23 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
常用的php对象类型判断
2008/08/27 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
一分钟理解js闭包
2016/05/04 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python pygame实现球球大作战
2019/11/25 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
2015年餐厅服务员工作总结
2015/04/23 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Selenium浏览器自动化如何上传文件
2022/04/06 Python