vue 部分頁面緩存，部分頁面不緩存的問題

前端時間項目迭代，其中有個需求

在vue里面，有a.b.c三個頁面，要達到的效果是從a頁面進去b頁面，b頁面需要刷新，但若從b頁面進入c頁面了以后再回到b頁面，b頁面需要保留之前的值，不做刷新；

第一想到的是：<router-view v-if="$route.meta.keepAlive"></router-view> ；但是由於v-if 每次會銷毀頁面元素，導致第一次是緩存不成功的；在網上也找到過window.reload();這種方法，但是頁面會有一瞬間的空白，用戶體驗不是很好；

后同事找了一種方法，vuex結合路由守衛可以達到此效果，具體代碼如下：

首先app.vue

//js

computed: {
			keepAlive () {
				return this.$store.getters.keepAlive
			}
		},

//html
<keep-alive  :include='keepAlive'>
	<router-view></router-view>
</keep-alive>

vuex 中需要定義keepAlive

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

var store = new Vuex.Store({
    // 定義狀態
    state: {
    	
        keekAlives:[],
        
    },
    mutations:{  //更改 Vuex 的 store 中的狀態
        SET_KEEP_ALIVE:function(state, keekAlives){
           return state.keekAlives = keekAlives;
        }
    },
    getters: {
      keepAlive: function(state){
          return state.keekAlives
    //   keepAlive: state => state.keekAlives
      }
    }
})

export default store

最后在需要緩存的頁面進行判斷

beforeRouteEnter (to, from, next) {
     next(vm => {
               if (from.name=="serve") {
                    vm.$store.commit('SET_KEEP_ALIVE', ['addProject'])
               }
            })
        },
        beforeRouteLeave (to, from, next) {
            if (to.name == "companySearch") {
               this.$store.commit('SET_KEEP_ALIVE', ['addProject'])
            } else if (to.name=="serve" || to.name=="addSuccess") {
　　　　　　　　　this.$store.commit('SET_KEEP_ALIVE', [])　
            }
            next()
        },