文章开头,先说一下我遇到的问题,如果不是类似业务逻辑,那么可能会遇到方法不可用的效果,淡定~~~
我的问题是:当前有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 来判断缓存组件是否显示,但是我发现这个方法的使用场景不仅单一,而且不能支持更深的逻辑,但是发现好多人都在用这种方法,而且都是亲自测过可以使用,我不太明白是我没有用对,还是他们的自测不够深入,谨代表我的少许疑问,有怪莫怪!!!