Vue的keep-alive组件使用详解（亲测可用）
文章开头说说我遇到的问题。如果和业务逻辑不相似，那么你可能会遇到方法不可用的效果。冷静~~~我的问题是：目前有3个页面，首页（简称A）、列表页（简称B）、详情页（简称C），从A->B、B->C、C->B，此时，希望页面B的状态就是进入页面C时的状态，B->A，A->B。这时候希望页面B是页面的初始状态，但是我用了/keep-alive>这个方法只能实现当B->C->B时，页面被缓存，并且B->A->B之后就不是初始状态了，就不多说了！看方法！使用vue的include和exclude方法在App.vue中这样写
B.vue需要用到两个生命周期函数来进行逻辑处理beforeRouteEnter和beforeRouteLeavebeforeRouteEnter(to,from,next){next(vm=>{ //从页面C进入判断,如果是的话，页面B还是需要缓存的从，下一个）{ //判断要访问的页面是否为C，如果是则需要缓存页面Bif(to.name==='C'){this.$store.commit('setKeepAlive',['vehicleManage'])}else{ //否则清空缓存队列，（这里清空缓存队列视情况而定，我只需要缓存这个页面，所以就清空了，如果不清空不知道怎么办it，可以在store中设置更多的全局缓存队列数组)this.$store.commit('setKeepAlive',[])}next()}，这个属性需要添加到store中的全局store对象中。jsconststate={keepAlive:\[''],}//给mutations属性添加set来修改这个属性{keepAlive:state=>{returnstate.keepAlive},}最后监听App.vue中的属性变化，动态传递给keep-alivecomputed的include属性：{ //监听的keepAlive属性，动态传递给keep-alivecomponent(文章开头的App.vue代码)keepAlive(){returnthis.$store.getters.keepAlive}}，以上是我遇到这个问题后使用的方法。至于吐槽，我在没有找到这个方法的时候使用了文章开头的方法，通过v-if判断缓存组件是否显示，但是发现这个方法的使用场景不仅单一，也无法支持更深层次的逻辑。但是我发现很多人都在用这个方法，而且都是亲身测试过的。不知道是我没有正确使用，还是他们自测的不够深入。我想表达我的一些疑问。难怪！！！
