VUE keepAlive緩存問題之動態使用exclude(會使用到VUEX)

exclude是啥?

官方解釋：

 

 怎么用呢？

處理的問題是什么？(答:返回首頁的時候清除B頁面的緩存)

我遇到的問題是：

一開始狀態:A（首頁）、 B（列表）、C（列表中的詳情）三個頁面，設置B頁面的keepAlive為true；

操作順序：A＝》B(1)＝》C＝》B＝》A＝》B＝》 C＝》B(4)

此時,最后一個B(4)頁面出現了B(2)中的緩存數據?(bug)

可是我已經清除緩存了,為啥還會這樣?

處理方法:

(1)使用vueX存儲全局變量;

 store.js

import Vue from 'vue';
import Vuex from 'vuex';
import user from './store/user.js'
Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
      user
    },
    state: {
        excludeXjlistpage:""
    },
    mutations: {
        changeExclude(state,data){
            state.excludePage= data ;//data就是需要清除緩存的頁面的name
  } 
 }, 
});

 

 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頁面

beforeRouteEnter(to, from, next) {
    next((vm) => {
      if(from.name == "A頁面name"){
        vm.$store.commit('changeExclude','')//changeExclude是事件,''是傳進去的參數,store.js中的data
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == "A頁面name") {
      this.$store.commit('changeExclude','B頁面的name')
    }
    next();
  },

別忘了在router.js中設置keepAlive為true

記錄一下花了我好久好久四處詢問總結處理的問題,希望也對你有幫助.