vue使用内置组件keep-alive事件动态缓存的方法

发布时间：2020-11-02 16:00:44 作者：Leah
来源：亿速云阅读：217

vue使用内置组件keep-alive事件动态缓存的方法？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

在App.vue文件中配置

  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>

在路由中配置

  {
    path: '/backstage',
    component: resolve => require(['@/views/backstage/my'], resolve),
    meta: { keepAlive: false }
  },
  {
    path: '/backstage/info',
    component: resolve => require(['@/views/backstage/my/info'], resolve),
    meta: { keepAlive: false }
  },

在页面中利用 beforeRouteLeave 动态处理

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // 不缓存
    // to.meta.keepAlive = true; // 缓存
    next();
  }
};

补充知识：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

vue使用内置组件keep-alive事件动态缓存的方法

防止在非当前页面重复触发keep-alive缓存页面的方法

vue使用内置组件keep-alive事件动态缓存的方法

看完上述内容，你们掌握vue使用内置组件keep-alive事件动态缓存的方法的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

vue使用内置组件keep-alive事件动态缓存的方法

相关阅读