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("刷新数据");
},