vue使用keep-alive后watch事件不销毁解决方案

使用了keep-alive动态缓存页面之后,有一些很难解决的问题:
  • 每个页面里面设置的watch监听事件,如果监听了路由的变化或者vuex的变化,在切换页面的时候watch不会被销毁,导致下一个页面重复触发上一个watch监听的对象,重复请求接口。
解决方案:

定义一个全局 mixin.js

export const mixin = {
  data () {
    return {
      activatedFlag: false
    };
  },
  mounted () {
    this.activatedFlag = true;
  },
  activated () {
    this.activatedFlag = true;
  },
  deactivated () {
    this.activatedFlag = false;
  }
};

在使用keep-alive缓存的页面引入mixin
在这里插入图片描述
防止在非当前页面重复触发keep-alive缓存页面的方法
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/jstljspservlet/article/details/105194167