vue项目中定时器无法清除

当前页面有定时器，并且定时器在离开页面时，有清除。但是在其他页面此定时器依然生效。

  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer)

      this.timer = null

    }

  },

原因：

当前页面 (假设当前页面为page1) 的定时器是在一系列前置请求之后，才触发的。【此定时器前面有一堆请求，等这堆请求完成之后，定时器才会被触发】

路由切换过快的时候，切换到了其他页面（page2,page3...）时，当前页面（page1）的beforeDestroy函数已经触发了，但是当前页面（page1）的定时器还没有触发。当切换到其他页面（page2,page3...）的时候，当前页面（page1）的定时器才执行。

此种情况下，定时器无法清除

解决：执行定时器的时候，加个判断即可。

判断路由是否为当前page1的路由名称。如果是当前的路由名称，才开始执行定时器

假如page1的路由name是【page1】

vue2和vue3思路都是如此

        if (this.$route.name === 'page1') {
          this.timer = setInterval(() => {
              this.getListPage()
          }, 3 * 1000)
        }