vue路由事件beforeRouteLeave及組件內定時器的清除方法
更新時間：2018年09月29日 15:34:45 作者：機智的導演
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內定時器的清除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
背景
之前在做ADTS項目的時候，首頁是一個實時監(jiān)測的頁面，需要每隔5秒更新一次數(shù)據，而業(yè)務邏輯上的需要先請求告警列表的接口的，從告警列表中拿到數(shù)據再去獲取其他的數(shù)據，所以我在獲取告警列表的方法中增加了一個定時器。
最開始我是將定時器聲明在組件內部的（由于頁面不多，數(shù)據關聯(lián)也不太強，所以項目中沒有使用store進行數(shù)據管理），后來清除的時候發(fā)現(xiàn)無法清除，后來索性聲明到window下了。然后在組件內部寫了如下代碼：
發(fā)現(xiàn)也沒能將定時器清除，后來走debug發(fā)現(xiàn)根本就沒有進到這個方法中去，然后就去問同事有沒有遇到過類似的問題。
解決
后來同事建議我將路由離開事件的代碼放到配置了路由的界面中，我試了一下，果然好使，定時器成功清除。
總結
vue的beforeRouteEnter和beforeRouteLeave都要寫在配置了路由的界面中才能出發(fā)，寫在界面所調用的組件內部無法觸發(fā)。
vue如果沒有使用store的話設置定時器可以直接聲明在window下，便于清除。
以上這篇vue路由事件beforeRouteLeave及組件內定時器的清除方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue實現(xiàn)飛機大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個簡單的Demo實例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-10-10
本篇文章主要介紹了使用vue構建移動應用實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue視圖不更新情況詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預約掛號首頁步驟詳情
這篇文章主要為大家介紹了VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預約掛號首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
vue.cli是vue中的項目構造工具,是一個npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關于利用vue-cli創(chuàng)建vue項目的詳細步驟,需要的朋友可以參考下2022-06-06
vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在本篇文章里小編給大家整理了關于Vue3項目打包后部署到服務器 請求不到后臺接口解決方法，有需要的朋友們可以參考下。2020-02-02