【已解决】VUE 轮询、轮询终止 beforeRouteLeave

最新推荐文章于 2024-05-09 16:42:36 发布

(づど)

最新推荐文章于 2024-05-09 16:42:36 发布

阅读量2.7k

点赞数 5

分类专栏： VUE的学习文章标签： vue javascript

本文为博主原创文章，转载必须注明来源

本文链接：https://blog.csdn.net/qq_36888550/article/details/111408143

版权

VUE的学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

方法二：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;
        }
     },