在vue中不同场景keepalive使用方法（移除缓存页面、新增缓存页面，动态控制）

场景1：router-view所有路径匹配到的视图组件都会被缓存

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存！ -->
    </router-view>
</keep-alive>

场景2：router-view里面的某个组件被缓存

• 使用 include/exclude (exclude例子类似)

 <!-- 只有路径匹配到的 name 为 a 组件会被缓存 -->
<keep-alive include="a">
    <router-view></router-view>
</keep-alive>

• 使用 meta 属性

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件，比如 Profile！ -->
</router-view>

场景3：
B页面跳转到A，A页面需要缓存，
C页面跳转到A，A页面不需要被缓存

思路：在vuex中存储需要缓存的页面名字，B跳A时vuex中加入A页面name，C跳转到A时移除vuex中A页面name；

需要的设置缓存的页面：

<keep-alive :include="keepAlivePage">
          <router-view></router-view>
</keep-alive>

<script>
  computed: {
    ...mapGetters([
      'keepAlivePage'
    ])
  }
</script>

在vuex中（这里把vuex用Moudules按照模块划分了）
getters中

// 获取需要缓存的页面
const getters = {
  keepAlivePage: state => state.settings.keepAlivePage 
}
export default getters

state中

// 需要缓存的页面，如果说你一开始就要缓存，那么你可以在这里设置初始值，如果你不需一开始就设置缓存，那么设置为空，再通过某种条件通过mutations或者actions改变keepAlivePage
const state = {
  keepAlivePage: [] 
}

mutations中

mutations: {
        ADD_KEEP_ALIVE: (state, name) => {
            state.keepAlivePage = state.keepAlivePage.concat(name)
        },

        DELETE_KEEP_ALIVE: (state, name) => {
            const keepAlivePage = state.keepAlivePage
            const index = keepAlivePage.indexOf(name)
            if (index > -1) {
                keepAlivePage.splice(index, 1)
            }
        }
    },

注意：页面组件的名字要和router设置页面的名字要一一对应，不然的话接下来的需求就会实现不了！！

B页面

//例如：从B去A，A需要缓存
 BgoA() {
      //'A'就是你要增加页面缓存的名称。
        this.$store.commit("ADD_KEEP_ALIVE", ['A'])
 }

C页面

//例如：从C去A，A不需要缓存
 CgoA() {
      //移除A页面的缓存
        this.$store.commit("DELETE_KEEP_ALIVE", 'A')
 }
 

点击查看keepalive详细介绍