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