博主之前在网上找了一大堆利用keep-alive来实现动态页面缓存的方法，但这些方法存在着各种bug，具体就不多说了，相信使用过keep-alive的人都踩过类似的坑。。。

话不多说，首先我要达到的效果是A—>B—>C每次都刷新页面，C—>B时缓存页面，但每次A到B刷新B页面，B到C刷新C页面

现在我们就用include结合vuex来实现指定页面的缓存

首先第一步*** 路由index.js*中

 		//A页面
        {
            path: '/A',
            name: 'A',//每个需要缓存的页面name必不可少
            component: resolve => require(['../components/aaa.vue'], resolve)
        },
        //B页面
        {
            path: '/B',
            name: 'B',
            component: resolve => require(['../components/bbb.vue'], resolve)
        },
        //C页面
        {
            path: '/C',
            name: 'C',
            component: resolve => require(['../components/ccc.vue'], resolve)
        },

第二步，vuex里的store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

var state = {
    keepAlive: [],
}

//mutations里面放的是方法，方法主要用于改变state里的数据

var mutations = {
    SET_KEEP_ALIVE: (state, keepAlive) => {
        state.keepAlive = keepAlive
    },
}

//getters和组件的computed 类似，方便直接生成一些可以直接用的数据。当组装的数据要在多个页面使用时，就可以使用 getters 来做

var getters = {

    keepAlive: state => state.keepAlive
    
}

//vuex 实例化 Vuex.store

const store = new Vuex.Store({
    state,
    mutations: mutations,
    getters: getters
})

//暴露
export default store;

第三步，App.vue里

<template>
    <div id="app">
        <keep-alive :include="keepAlive">
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App',
        data: function () {
            return {}
        },
        computed:{
            keepAlive(){
                return this.$store.getters.keepAlive
            }
        }
    }
</script>

第四步，每次进入B页面时先初始化 keepAlive(设置要走缓存的页面)，此次写在A页面中

<script>
    export default {
        name: 'A',
        methods: {
            buttonClick () {
                this.$store.commit('SET_KEEP_ALIVE', ['B', 'C']) //可自行添加缓存组件的个数
　　　　　　　　　 this.$router.push('/B') 
　　　　　　　} 
　　　　　} 
　　}
</script>

第五步，在B页面中设置缓存和清除缓存

<script>

    export default {
        name: 'B',
        beforeRouteEnter (to, from, next) {
            next(vm => {
               if (from.path.indexOf('C') > -1) {
                    vm.$store.commit('SET_KEEP_ALIVE', ['B'])
               }
            })
        },
        
        beforeRouteLeave (to, from, next) {
            if (to.path.indexOf('C') > -1) {
               this.$store.commit('SET_KEEP_ALIVE', ['B', 'C'])
            } else if (to.path.indexOf('A') > -1) {
　　　　　　　　　this.$store.commit('SET_KEEP_ALIVE', [])　
            }
            next()
        }
　}
　
</script>

结束了，结束了，就这样结束了…，5分钟 。。。 好快。。。