vue路由事件beforeRouteLeave及组件内定时器的清除方法
背景
之前在做ADTS项目的时候，首页是一个实时监测的页面，需要每隔5秒更新一次数据，而业务逻辑上的需要先请求告警列表的接口的，从告警列表中拿到数据再去获取其他的数据，所以我在获取告警列表的方法中增加了一个定时器。
最开始我是将定时器声明在组件内部的（由于页面不多，数据关联也不太强，所以项目中没有使用store进行数据管理），后来清除的时候发现无法清除，后来索性声明到window下了。然后在组件内部写了如下代码：
发现也没能将定时器清除，后来走debug发现根本就没有进到这个方法中去，然后就去问同事有没有遇到过类似的问题。
解决
后来同事建议我将路由离开事件的代码放到配置了路由的界面中，我试了一下，果然好使，定时器成功清除。
总结
vue的beforeRouteEnter和beforeRouteLeave都要写在配置了路由的界面中才能出发，写在界面所调用的组件内部无法触发。
vue如果没有使用store的话设置定时器可以直接声明在window下，便于清除。
以上这篇vue路由事件beforeRouteLeave及组件内定时器的清除方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
我有几个路线，每个路线装载3个组件。所有管线上的两个组件都相同。当我在这些路由之间移动时，我希望传递新数据，在组件的某个初始化事件上，我希望填充该组件的数据，以便它反映在UI上。我还想重新触发正在加载的组件的引导动画。我该怎么做呢。因为现在，我不知道在组件的生命周期中，我将在哪里获取数据，并使用这些新数据重新提交组件。具体来说，在myapps/1和/newapp/I中有一个主视图组件和一个侧栏组件
-
我使用的是React-router，当我点击链接按钮时，它工作得很好，但当我刷新我的网页时，它并没有载入我想要的内容。 这个问题不会在localhost/中发生，它总是返回我想要的东西。
-
本文向大家介绍vue实现路由懒加载及组件懒加载的方式，包括了vue实现路由懒加载及组件懒加载的方式的使用技巧和注意事项，需要的朋友参考一下 一、为什么要使用路由懒加载 为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。 二、定义 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 三、使用 常用的懒加载方式有两种：即使用vue异步组件 和 ES中的imp
-
本文向大家介绍Vue.js路由组件vue-router使用方法详解，包括了Vue.js路由组件vue-router使用方法详解的使用技巧和注意事项，需要的朋友参考一下 使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子： 二、块化机制编程基本例子，以在vue-cli中的使用方法为例
-
我有一个关于Vuejs和Vue路由器的项目。当用户登录系统时，服务器返回一个带有令牌、用户名和名字的Json文件，该文件存储在localstorage中，以便在以下请求中使用。第一个名称在布局中用于在导航栏中显示欢迎消息。注销后，localstorage被清除，问题就在这里，当其他用户在消息welcome not reload中使用新的名字付费时。
-
我正在使用Vue router指向src文件中名为components的文件夹中的不同组件，这很奇怪，但所有组件中的模板都是相同的，我导入了文件并以完全相同的方式定义了路由，当然除了我的主文件中的确切组件文件名之外。js文件 这是我的main.js档案 奇怪的是，它们都展示了两个组成部分，家。vue和聚会。vue，其余的根本不显示。有人能帮忙吗？同样，组件模板本身是相同的，以防您漫游，提前感谢）