Cuando estaba escribiendo código, me encontré con esta situación: una página -> página B -> página C. Cuando la página A -> página B, la página B obtiene los datos más recientes (no almacenados en caché); la página B -> página C, la página B se almacena en caché. Lo primero en lo que pensé cuando encontré el problema fue en Baidu Dafa, pero Baidu vino a Baidu y no pude encontrar una buena solución hasta que encontré este artículo, que resolvió perfectamente el problema de caché de la página de mantenimiento de vue e inspiró a mí. Empecé otra habilidad CV Dafa nuevamente, y finalmente descubrí que el código interno aún no satisfacía mis necesidades, así que lo modifiqué un poco y, por cierto, hice un registro. Pegue el código directamente debajo. . .
Página A
<template>
<div>
我是页面A
</div>
</template>
<script>
export default {
name: "PageA",//这里要写
data() {
return {
};
},
};
</script>
<style scoped>
</style>
Página B (creo que después de leer el código, encontrará que principalmente emite juicios en la página 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>
Página C
<template>
<div>
页面C
</div>
</template>
<script>
export default {
name: "PageC",
data() {
return {
};
},
};
</script>
<style scoped>
</style>
store.js, necesita instalar 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
aplicación.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>