解决Vue+elementUI后台管理离开页面destroyed()清除定时器失效问题

正常来说清除定时器是在页面销毁的时候清除,如

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(),否则切换侧标导航栏时 切换路由会失效,导致不能切换页面

你可能感兴趣的