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ù)管理），后來(lái)清除的時(shí)候發(fā)現(xiàn)無(wú)法清除，后來(lái)索性聲明到window下了。然后在組件內(nèi)部寫了如下代碼：
發(fā)現(xiàn)也沒能將定時(shí)器清除，后來(lái)走debug發(fā)現(xiàn)根本就沒有進(jìn)到這個(gè)方法中去，然后就去問同事有沒有遇到過(guò)類似的問題。
解決
后來(lái)同事建議我將路由離開事件的代碼放到配置了路由的界面中，我試了一下，果然好使，定時(shí)器成功清除。
總結(jié)
vue的beforeRouteEnter和beforeRouteLeave都要寫在配置了路由的界面中才能出發(fā)，寫在界面所調(diào)用的組件內(nèi)部無(wú)法觸發(fā)。
vue如果沒有使用store的話設(shè)置定時(shí)器可以直接聲明在window下，便于清除。
以上這篇vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue 3 中,覆蓋組件樣式的方法與 Vue 2 相似,但由于 Vue 3 更多地依賴于 CSS 的模塊化,一些最佳實(shí)踐可能會(huì)有所不同,下面就跟隨小編一起來(lái)了解一下吧2024-04-04
在vue-cli腳手架中配置一個(gè)vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個(gè)vue-router前端路由的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
Vue-admin-template?添加、跳轉(zhuǎn)子頁(yè)面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁(yè)面問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能,本文通過(guò)截圖實(shí)例代碼說(shuō)明給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址(推薦)
這篇文章主要介紹了vue axios 給生產(chǎn)環(huán)境和發(fā)布環(huán)境配置不同的接口地址，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點(diǎn)說(shuō)就是使用配置文件來(lái)管理多環(huán)境，實(shí)現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法
今天小編就為大家分享一篇element ui 表格動(dòng)態(tài)列顯示空白bug 修復(fù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue多頁(yè)面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解
這篇文章主要為大家介紹了vue多頁(yè)面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01