vue动态使用keepalive缓存页面

vuex

// src/store/modules/tagsView.js
const state = {
  // 用户访问过的页面 就是标签栏导航显示的一个个 tag 数组集合
  visitedViews: [],
  // 实际 keep-alive 的路由。可以在配置路由的时候通过 meta.noCache 来设置是否需要缓存这个路由 默认都缓存。
  cachedViews: ['Home', 'Order'],
  noCachedViews: []
}
const mutations = {
  ADD_NO_CACHED_VIEWS: (state, view) => {
    state.noCachedViews = view
  },
}
export default {
  namespaced: true,
  state,
  mutations,
  // actions
}

主路由

// src/layout/components/AppMain.vue
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews" :exclude="noCachedViews">
        <router-view :key="key" v-if="$route.meta.keepAlive" />
      </keep-alive>
    </transition>
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" v-if="!$route.meta.keepAlive" />
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    noCachedViews() {
      return this.$store.state.tagsView.noCachedViews
    },
    key() {
      return this.$route.path
    },
  }
}
</script>

入口main文件

// src/main.js
import store from './store'
router.afterEach(() => {
  // 重置不缓存的页面名称
  setTimeout(() => {
    store.commit('tagsView/ADD_NO_CACHED_VIEWS', [])
  }, 2000)
})

页面交互逻辑

// src/views/home/index.vue
 methods: {
    // 不缓存页面数据
    closeSelectedTag(view) {
      if (view.name) {
        this.$store.commit('tagsView/ADD_NO_CACHED_VIEWS', [view.name])
      }
    },
}