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

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

this.timer= setInterval(()=>{
    
    
        console.log("我刷新了")
},15000)

destroyed(){
    
    
	clearInterval(this.timer)
}

但是在后台管理页面的时候这样做却失效了。
问题所在：我们在写后台时，习惯性设置一个主页面（也就是包含头部、侧边导航栏、底部、中心内容）将子页面都放到中心内容content里。在子页面设置定时器时，切换其他子页面并不是真正的离开了页面，实质上还是在主页面上，所以在destroyed(){}设置清除定时器并不会生效。
本质上是：清除子组件的定时器
解决方法：在 beforeRouteLeave (to, from, next) {} 离开路由的时候清除

该方法放在子组件上

this.timer= setInterval(()=>{
    
    
        console.log("我刷新了")
},15000)

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

值得注意的是，必须添加next（），否则切换侧标导航栏时 切换路由会失效，导致不能切换页面