我在写代码的时候，遇到这样一种情况就是：A页面->B页面->C页面。A页面->B页面时，B页面获取最新数据（不缓存）；B页面->C页面，B页面缓存。发现问题第一时间想到的就是百度大法，但是百度来百度去，都找不到一个好办法，直到遇到这篇文章完美解决vue keep-alive页面缓存问题给了我启发。再次发动另一个技能CV大法，最后发现里面的代码还是不太符合我的需求，然后就稍微修改了一下，顺便做个记录。下面直接贴代码了。。。
页面A
<template>
<div>
我是页面A
</div>
</template>
<script>
export default {
name: "PageA",//这里要写
data() {
return {
};
},
};
</script>
<style scoped>
</style>
页面B（相信大家看完代码之后，发现主要是在页面B做判断）
<template>
<div id="daily-schedule">
页面B
<input type="text"/>
</div>
</template>
<script>
export default {
name: "PageB",//这里要写
data() {
return {
};
},
beforeRouteEnter (to, from, next) {
if (from.path === "/PageA") {
next((vm) => {
vm.$store.commit("delcachePageName", to.name);
});
} else {
next();
}
},
beforeRouteLeave(to, from, next) {
if (to.path === "/PageA") {
this.$store.commit('addcachePageName', from.name)
}
next();
},
};
</script>
<style scoped>
</style>
页面C
<template>
<div>
页面C
</div>
</template>
<script>
export default {
name: "PageC",
data() {
return {
};
},
};
</script>
<style scoped>
</style>
store.js，需要安装vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
//state 存放数据
state: {
cachePageName:'', //不缓存组件名称
},
// mutations 改变数据定义方法
mutations: {
//重置缓存组件名称
resetcachePageName(state, res){
state.cachePageName = res;
},
//添加缓存组件名称
addcachePageName(state, res){
if(state.cachePageName == ''){
state.cachePageName = res;
}else{
let arr = state.cachePageName.split(',');
if (res && typeof res === 'string') {
let i = arr.indexOf(res);
if (i <= -1) {
state.cachePageName = state.cachePageName+','+res;
}
}
}
},
//删除缓存组件名称
delcachePageName(state, res){
let arr = state.cachePageName.split(',');
if (res && typeof res === 'string') {
let i = arr.indexOf(res);
if (i > -1) {
arr.splice(i, 1);
state.cachePageName = arr.join();
}
}
}
},
getters: {
getCachePageName(state){
return state.cachePageName;
}
}
})
export default store
App.vue
<template>
<div id="app">
<keep-alive :exclude="cachePageName">
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
};
},
computed: {
cachePageName(){
return this.$store.getters.getCachePageName;
}
},
}
</script>
<style>
</style>