vue 路由跳转时如何清除掉页面的定时器？

背景：当前列表需要隔5分钟进行一次定时刷新；

问题： 没有清除定时的话，进入其它页面了，定时器依然执行；

解决办法：使用组件内的守卫beforeRouteLeave；

 

data里面定义了一个变量

data(){
  return {
    timedTasksCollector: null,
   }  
}

把定时器的任务定义在activated事件，这样子，当清除定时后，下次再次进入当前路由的话，可以再次唤起定时器

activated() {
    this.timedTasksCollector = setInterval(() => {
      this.getNeedCollectLoanOrderList();
    }, 300000);
  },

清除的方法

beforeRouteLeave(to, from, next){
    next();
    if (this.timedTasksCollector) {
      clearInterval(this.timedTasksCollector);
      this.timedTasksCollector = null;
    }
  },

beforeRouteLeave跟methods平行。