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