目录

1 在data中定义

2 在methods中定义

3 开始轮询

4 终止轮询

方法一： destroyed()

方法二：beforeRouteLeave(to, from, next) 推荐

所有代码

---

轮询：polling

1 在data中定义

     data() {
        return {
            polling: ''
        }
    },

2 在methods中定义

     methods: {
      getDateLoop(timeout = 15000) { // timeout可以写死，也可以动态
        console.log('查询'); // 执行语句
        this.polling = setInterval(() => {
          console.log('查询'); // 轮询中，执行语句
        }, timeout)
      },
    },

3 开始轮询

    created() {
      this.getDateLoop(); // 开始轮询
    },

在当前页面不停打印，说明轮询成功

4 终止轮询

方法一： destroyed()

这个方法，反复跳转后会失效（有点奇怪），所以转用方法二

失效原因：开发的网页是SPA-单页面应用，每次页面跳转，都是由路由机制管理，刷新的只有网页内容。（因为这个销毁过程失灵时不灵，所以博主猜测：）页面跳转的时候不一定会销毁这个组件所以这个方法失灵时不灵。

     destroyed() {
       clearInterval(this.polling) // 结束轮询
     },

跳转页面后，停止打印，说明轮询停止

方法二：beforeRouteLeave(to, from, next) 推荐

    beforeRouteLeave(to, from, next){  // 路由跳转前，清除轮询
        next();
        if (this.polling) {
          clearInterval(this.polling);
          this.polling = null;
        }
     },

所有代码

     data() {
        return {
            polling: ''
        }
    },
     methods: {
      getDateLoop(timeout = 15000) { // timeout可以写死，也可以动态
        console.log('查询'); // 执行语句
        this.polling = setInterval(() => {
          console.log('查询'); // 轮询中，执行语句
        }, timeout)
      },
    },
    created() {
      this.getDateLoop(); // 开始轮询
    },
    // destroyed() {
    //   clearInterval(this.polling) // 结束轮询
    // },
    beforeRouteLeave(to, from, next){  // 路由跳转前，清除轮询
        next();
        if (this.polling) {
          clearInterval(this.polling);
          this.polling = null;
        }
     },