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 来判断缓存组件是否显示,但是我发现这个方法的使用场景不仅单一,而且不能支持更深的逻辑,但是发现好多人都在用这种方法,而且都是亲自测过可以使用,我不太明白是我没有用对,还是他们的自测不够深入,谨代表我的少许疑问,有怪莫怪!!!

 

上一篇:归并排序


下一篇:安卓嵌入式混合开发,使用webview加载vue页面,使用keep-alive缓存的问题。