vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。
场景:在A.vue页面有一个定时a,然后跳转到B.vue页面,此时A页面的定时器a依然在运行。
解决方式一:

  • 首先在data里进行定义定时器;
data() {                   
  return {                                          
   timer: null  // 定时器名称                 
  }         
},
  • 然后在mounted里使用定时器;
this.timer= setInterval(() => {
	  // 操作
      method();
    }, 60000);
  • 最后在beforeDestroy里清除定时器;
beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

解决方式二:
通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器。

    this.timer= setInterval(() => {
      // 操作
      method();
    }, 60000);
    // 通过$once来监听定时器,在beforeDestroy钩子可以被清除
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer);
    })

解决方式三:

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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐