vue A、B、C三个页面keepAlive、include页面缓存问题

背景：
1、A列表页面 --- 跳转到 --- B填写页面 (B页面不要缓存)。
2、A列表页面 --- 跳转到 --- B填写页面(填写了内容) --- 跳转到(B页面需要缓存) --- C选择单位页面再回到B页面，要显示 B页面之前填写的内容。

用vue-router中的keepAlive设置为true是不可行的。

// ********app.vue文件*******
<div id="app">
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

// ********router.config.js文件*******
{
  path: '/A',
  name: 'A',
  component: () =>import ('@/views/A'),
  meta: {
      title: 'A列表页面',
      keepAlive: false
  }
},
{
  path: '/B',
  name: 'B',
  component: () =>import ('@/views/B'),
  meta: {
      title: 'B填写页面',
      keepAlive: true   //  设置B页面缓存
  }
},
{
  path: '/C',
  name: 'C',
  component: () =>import ('@/views/C'),
  meta: {
      title: 'C单位选择页面',
      keepAlive: false
  }
}

// 在B填写页面拦截路由跳转，动态修改B填写页面的缓存
beforeRouteLeave(to, from, next) {
    if (to.name === 'C') {
       from.meta.keepAlive = true // 跳转C单位选择页面，设置B填写页面(本页面)缓存
    }else{
      from.meta.keepAlive = false // 跳转A列表页面，设置B填写页面(本页面)不缓存
    }
    next()
  },

注：：：：：以上这种方式是不行的。

可行方案：
结合keep-alive的include属性和vuex进行缓存。

image.png

首先安装vuex
安装后新建store.js
// ********store.js文件*******
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        keepAlive: []
    },
    mutations: {
        setKeepAlive: (state, keepAlive) => {
            state.keepAlive = keepAlive
        }
    },
    getters: {
        keepAlive: state => state.keepAlive
    }
})

//在main.js里面引入store.js
// ********main.js文件*******
import store from './store'
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

// ********app.vue文件*******
<div id="app">
     <keep-alive :include="keepAlive">
       <router-view></router-view>
     </keep-alive>
</div>
<script>
export default {
  name: 'MainView',
  computed: {
    keepAlive() {
      return this.$store.getters.keepAlive
    }
  }
}
</script>

// ********A列表页面.vue文件*******
// 在A列表页面点击进入 B填写页面时
this.$store.commit('setKeepAlive', ['B']) // 设置B填写页面缓存
this.$router.push('/B')  // 跳转B填写页面

// ********B填写页面.vue文件*******
// B填写页面的跳转路由拦截方法
beforeRouteLeave (to, from, next) {
   if (to.name === 'C') {  //  如果跳转是C单位选择页面，那就把当前B填写页面缓存起来。
    this.$store.commit('setKeepAlive', ['B'])
  } else {
    this.$store.commit('setKeepAlive', [])　// 跳转其它页面则清除缓存
  }
  next()
 }

这种方式不依赖于vue-router中的keepAlive值，那怕设置为false，也可以通过上面的方式进行页面缓存。
这样就OK了！！！