exclude是啥?
官方解釋:

怎么用呢?
處理的問題是什么?(答:返回首頁的時(shí)候清除B頁面的緩存)
我遇到的問題是:
一開始狀態(tài):A(首頁)、 B(列表)、C(列表中的詳情)三個(gè)頁面,設(shè)置B頁面的keepAlive為true;
操作順序:A=》B(1)=》C=》B=》A=》B=》 C=》B(4)
此時(shí),最后一個(gè)B(4)頁面出現(xiàn)了B(2)中的緩存數(shù)據(jù)?(bug)
可是我已經(jīng)清除緩存了,為啥還會(huì)這樣?
處理方法:
(1)使用vueX存儲(chǔ)全局變量;
store.js
1 import Vue from 'vue'; 2 import Vuex from 'vuex'; 3 import user from './store/user.js' 4 Vue.use(Vuex); 5 7 export default new Vuex.Store({ 8 modules: { 9 user 10 }, 11 state: { 12 excludeXjlistpage:"" 13 }, 14 mutations: { 15 changeExclude(state,data){ 16 state.excludePage= data ;//data就是需要清除緩存的頁面的name
17 }
18 },
19 });
APP.vue
<template>
<div>
<keep-alive :exclude="this.$store.state.excludePage">
<router-view v-if="$route.meta.keepAlive" ></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
B頁面
1 beforeRouteEnter(to, from, next) { 2 next((vm) => { 3 if(from.name == "A頁面name"){ 4 vm.$store.commit('changeExclude','')//changeExclude是事件,''是傳進(jìn)去的參數(shù),store.js中的data 5 } 6 }); 7 }, 8 beforeRouteLeave(to, from, next) { 9 if (to.name == "A頁面name") { 10 this.$store.commit('changeExclude','B頁面的name') 11 } 12 next(); 13 },
別忘了在router.js中設(shè)置keepAlive為true
記錄一下花了我好久好久四處詢問總結(jié)處理的問題,希望也對(duì)你有幫助.
從啥也不會(huì)開始吧
浙公網(wǎng)安備 33010602011771號(hào)