Vue+$route 循环执行定时器，并销毁

最新推荐文章于 2025-07-09 16:29:33 发布

原创最新推荐文章于 2025-07-09 16:29:33 发布 · 782 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种在前端开发中实现页面定时刷新的方法，并通过监听路由变化来控制定时任务的启动与停止，确保资源的有效利用。

要实现的功能：

1. 当我初次打开一个页面时，就开始循环执行定时任务，定时刷新页面列表；

2. 当我离开或关闭当前页面时，销毁定时器任务；

3. 当我再一次进入打开的页面时，又开始循环执行定时任务。

因为页面之间是路由跳转，所以用beforeDestroy方法并不能执行销毁定时器。所以我使用的是监听路由跳转来操作。

mounted() {
  // 初次打开页面执行获取列表方法和定时任务
  this.getNatRule(); // methods里的方法
  this.timer = setInterval(() => {
    this.getNatRule();
  }, 60e3);
},
watch: {
  // from-从哪里来，to-到哪里去
  $route(to, from) {
    if (to.path == "/nat/status") {
      // 循环执行定时器操作，1分钟循环一次
      this.timer = setInterval(() => {
        this.getNatRule();
      }, 60e3);
    } else if (from.path == "/nat/status") {
      // 销毁循环执行定时器
      clearInterval(this.timer);
    }
  }
}