Vue =＞ 使用keep-alive实现页面返回上一页缓存筛选内容以及分页

APPmain.vue

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" :key="key" />
      </keep-alive>
    </transition>
    <transition name="fade-transform" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive" :key="key" />
    </transition>
  </section>
</template>

route.js

 meta: { title: '我的', icon: 'el-icon-user', keepAlive: true, isUseCache: false },
 meta: { title: '全部', icon: 'el-icon-s-custom', keepAlive: true, isUseCache: false },

详情页xxxx.vue文件使用

created() {
    this.id = this.$route.params.id
  },
  beforeRouteLeave (to, from, next) {
    if (to.name == 'MyList' || to.name == 'AllList') {
      to.meta.isUseCache = true;
    }
    next();
  },

列表页xxxx.vue文件使用

 activated() {
    if (!this.$route.meta.isUseCache) {
      this.resetSearch();
      this.$route.meta.isUseCache = false
    } else {
      this._fetchData()
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name != 'Details') {
      from.meta.isUseCache = false;
    }
    next();
  },

  activated() {
    if (!this.$route.meta.isUseCache) {
      this.resetSearch();
      this.$route.meta.isUseCache = false
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name != 'Details') {
      from.meta.isUseCache = false;
    }
    next();
  },