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 进行数据缓存

<template>
  <div id="app">
    <!-- 页面中使用两个router-view，其中一个使用keep-alive包裹，在给每个加上v-if属性即可 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

注意：在使用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() {
	// 需要重新请求的写在这里，或者也可以在watch中监听路由来实现重新发请求

  	console.log("刷新数据");
},

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。我们就可以在不同的钩子函数内执行相关操作。

deactivated:一般用于H5中取消返回按钮事件 window.onpopstate = null;

activated：可以发ajax请求数据、给H5中返回按钮绑定事件 window.onpopstate = window.onpopstate = (e) => {

　　写一些点击返回按钮跳转指定页面代码

};