vue的keep-alive組件使用詳解（親測可用）

文章開頭，先說一下我遇到的問題，如果不是類似業務邏輯，那么可能會遇到方法不可用的效果，淡定~~~

我的問題是：當前有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 來判斷緩存組件是否顯示，但是我發現這個方法的使用場景不僅單一，而且不能支持更深的邏輯，但是發現好多人都在用這種方法，而且都是親自測過可以使用，我不太明白是我沒有用對，還是他們的自測不夠深入，謹代表我的少許疑問，有怪莫怪！！！