vue的keep-alive组件使用详解（亲测可用）

文章开头，先说一下我遇到的问题，如果不是类似业务逻辑，那么可能会遇到方法不可用的效果，淡定~~~

我的问题是：当前有3个页面，首页（简称A）、列表页面（简称B）、详情页面（简称C），从A->B，B->C，C->B，这时，希望B页面状态为进入C页面时的状态，然后从B->A，A->B，这时希望B页面是页面初始状态，但是我之前用

 

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

 

这种方法，只能实现B->C->B时页面被缓存，B->A->B之后不是初始状态

下面，看方法！

运用vue的include和exclude方法

App.vue中这样写

<div id="app">
    <keep-alive :include="keepAlive">
        <router-view class="router-view"></router-view>
    </keep-alive>
</div>

然后在A->B页面时，设置一个全局的数组

this.$store.commit('setKeepAlive', ['B'])//在A->B页面的方法中加上这段代码

B.vue中需要用两个生命周期函数来做逻辑处理  beforeRouteEnter和beforeRouteLeave

beforeRouteEnter (to, from, next) {
    next(vm => {
　　　　　//判断是否从C页面进入，如果是，那么仍需将B页面缓存
        if (from.name === 'C') {
            vm.$store.commit('setKeepAlive', ['B'])
        }
    })
},
beforeRouteLeave (to, from, next) {
　　//判断将要去的页面是否为C，若是，则需要将B页面缓存
    if (to.name === 'C') {
        this.$store.commit('setKeepAlive', ['vehicleManage'])
    }else {
　　//否则将缓存队列清空，（这里清空缓存队列依据情况而定，我只需要缓存这一个页面，所以做了清空，如果不知道不用清空应该怎么做的情况下，可以在store中多设置几个缓存队列的全局数组）
        this.$store.commit('setKeepAlive', [])
    }
    next()
},

store.js中需要给全局store对象加上这个属性

const state = {
    keepAlive: [''],
}

//mutations属性中加上set来修改这个属性
setKeepAlive (state, keepAlive) {
    state.keepAlive = keepAlive
} 

//然后在getters中来获取这个属性

getters: {
    keepAlive: state => {
        return state.keepAlive
    },
}

最终，在App.vue中监听该属性变化，并且动态传给keep-alive的include属性

computed: {
　　　//将监听到的keepAlive属性，动态穿给keep-alive组件（文章开头的App.vue代码）
     keepAlive () {
          return this.$store.getters.keepAlive
     }
},

以上，就是我碰到这个问题之后，所用的方法

在此有一点点想要吐槽的地方，我在没有找到这个办法的时候用了文章最开头那种方法，通过 v-if 来判断缓存组件是否显示，但是我发现这个方法的使用场景不仅单一，而且不能支持更深的逻辑，但是发现好多人都在用这种方法，而且都是亲自测过可以使用，我不太明白是我没有用对，还是他们的自测不够深入，谨代表我的少许疑问，有怪莫怪！！！