(二十)vue緩存頁面數據（keep-alive），同時刷新部分數據

vue緩存頁面數據（keep-alive），同時刷新部分數據

緩存頁面

在相應的頁面相互跳轉的時候，會出現希望在返回上一個頁面的時候保留之前的數據，解決方案就是在相應的路由文件上面進行操作，判斷是否進行緩存

路由文件index.js

// 路由配置
	// 費用管理-備用金申請 （需要被緩存的組件 ，在meta上進行標示）
	{
	   path: "ReserveFundApplication",
	   name: "ReserveFundApplication",
	   meta: {title: "備用金申請" ,  keepAlive:true}, 
	   component: () =>
	       import("../views/content/reimbursement/ReserveFund/ReserveFundApplication")
	},
	//費用管理--付款申請
	{
	   path: "PaymentRequestList",
	   name: "PaymentRequestList",
	   meta: {title: "付款申請"},
	   component: () =>
	       import("../views/companyContent/PaymentRequest/PaymentRequestList")
	},

APP.vue 進行數據緩存

    <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>

     <router-view v-if="$route.meta.keepAlive == undefined"></router-view>

注意：在使用ANTD的時候 有國際化的操作進行包裹

        <a-config-provider :locale="zh_CN">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </a-config-provider>

        <a-config-provider :locale="zh_CN">
            <router-view v-if="$route.meta.keepAlive == undefined"></router-view>
        </a-config-provider>

局部刷新數據

使用鈎子函數 ：activated

//把將要刷新的數據的操作放在這個里面  activated只有在被<keep-alive> 包裹下的時候才會被觸發 ，而且是一進頁面就觸發
activated() {
	// 需要重新請求的寫在這里
  	console.log("刷新數據");
},