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 相关文章推荐
display和visibility的区别示例介绍
Feb 26 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
关于JS中的作用域中的问题思考分享
Apr 06 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
一个用php3编写的简单计数器
2006/10/09 PHP
一段防盗连的PHP代码
2006/12/06 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Anaconda入门使用总结
2018/04/05 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
python实现逻辑回归的示例
2020/10/09 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
大学生实习自我鉴定
2013/12/11 职场文书
学校岗位设置方案
2014/01/16 职场文书
上课睡觉检讨书
2014/01/28 职场文书
优良学风班申请材料
2014/02/13 职场文书
聘用合同范本
2015/09/21 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
公历12个月名称的由来
2022/04/12 杂记