在使用VUE开发项目时，从列表页跳转到详情页后。每次返回会发现列表页都会进行重载。尤其是在列表页涉及到tab切换时，重载后用户还需要再次操纵切换。体验度大大降低。
可以选用keep-alive 里的include+VUEX进行动态缓存
如：从A>B>C页面时候，让页面刷新。从C>B>A时候让B禁止刷新。也就是需要将B页面存入缓存中。
实现：首先需要在A/B/C各自的单页面中命名name。这里可以先命名成A、B、C.
APP.VUE
//APP.VUE
<keep-alive :include="keepAlive" >
<router-view/>
</keep-alive>
export default {
name: 'App',
computed: {
keepAlive () {
return this.$store.getters.keepAlive
}
},
}
store.js
import Vue from 'vue'
import Vuex from 'vuex'
export default new Vuex.Store({
state: {
keepAlive: []
},
mutations: {
setKeepAlive: (state, keepAlive) => {
state.keepAlive = keepAlive;
}
},
getters: {
keepAlive: state => state.keepAlive
}
});
A.VUE
//监听路由离开
export default {
name: "A",
components: {
countTo },
beforeRouteLeave (to, from, next) {
this.$store.commit('setKeepAlive', ['B'])
next()
}
},
B.VUE
export default {
name: "B",
components: {
countTo },
beforeRouteLeave (to, from, next) {
//判断要进入的页面是不是C，如果是C则给B进行缓存。
if (to.name === 'C' ) {
this.$store.commit('setKeepAlive', ['B'])
} else {
this.$store.commit('setKeepAlive', [])
}
next()
},
},
以上代码就可以实现B页面数据的缓存。但是如果B页面中有Tab切换。在切换后直接进入C页面，点击A页面，在点击进入B页面。会发现B页面的缓存还在。这时候我们需要在C页面也进行缓存清理。
C.VUE
export default {
name: "C",
components: {
countTo },
beforeRouteLeave (to, from, next) {
//判断要进入的页面是不是B，则给B进行缓存。
if (to.name === 'B' ) {
this.$store.commit('setKeepAlive', ['B'])
} else {
this.$store.commit('setKeepAlive', [])
}
next()
},
},
按照已经代码执行，就会实现A>B>C 刷新页面请求数据。C>B保留页面数据。希望对大家有所帮助！