Normally, the clear timer is cleared when the page is destroyed, such as
this.timer= setInterval(()=>{
console.log("我刷新了")
},15000)
destroyed(){
clearInterval(this.timer)
}
But doing so does not work in the background management page.
The problem is that when we write the background, we habitually set a main page (that is, including the header, side navigation bar, bottom, and center content) and place all the sub-pages in the center content. When setting the timer on a subpage, switching to other subpages does not really leave the page, but is still on the main page, so setting the clear timer in destroyed(){} will not take effect.
Essentially : Clear the timer of the subcomponent.
Solution : Clear beforeRouteLeave (to, from, next) {} when leaving the route
The method is placed on the child component
this.timer= setInterval(()=>{
console.log("我刷新了")
},15000)
beforeRouteLeave (to, from, next) {
console.log("我离开了")
clearInterval(this.timer)
next()
}
It is worth noting that next() must be added, otherwise the switching route will be invalid when the sidebar navigation bar is switched, resulting in the inability to switch pages