Vue+elementUIバックグラウンド管理がページdestroyed()から離れてタイマの無効化の問題を解決する

3375 ワード

通常、パージタイマは、ページが破棄されたときにパージされます.
this.timer= setInterval(()=>{
     
        console.log("    ")
},15000)

destroyed(){
     
	clearInterval(this.timer)
}

しかし、バックグラウンドでページを管理するときは無効になります.問題点:バックグラウンドを書くときに、ヘッダー、サイド・ナビゲーション・バー、下部、センター・コンテンツを含むホーム・フェースを設定することに慣れています.サブページにタイマーを設定する場合、他のサブページを切り替えるのは本当にページから離れているわけではありません.実質的にはホームページの面にあるので、destroyed(){}設定でタイマーをクリアしても有効ではありません.本質的には、サブコンポーネントをクリアするタイマ解決方法:beforeRouteLeave(to,from,next){}がルーティングを離れるときにクリア
この方法はサブアセンブリに配置されます
this.timer= setInterval(()=>{
     
        console.log("    ")
},15000)

beforeRouteLeave (to, from, next) {
     
    console.log("    ")
    clearInterval(this.timer)
    next()
}

注意すべきはnext()を追加する必要があります.そうしないと、サイドスケールナビゲーションバーを切り替えるときにルーティングを切り替えることができなくなり、ページを切り替えることができません.