zoukankan      html  css  js  c++  java
  • (二十)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("刷新数据");
    },
    
    咫尺远近却无法靠近的那个你,才敢让你发觉你并不孤寂
  • 相关阅读:
    分子量 (Molar Mass,ACM/ICPC Seoul 2007,UVa 1586)
    [补档]各种奇怪的韩信问题
    [补档][HNOI 2008]GT考试
    [补档][Tyvj 1728]普通平衡树
    [补档][JLOI 2017]聪明的燕姿
    [补档][NOI 2008]假面舞会
    网络基础
    操作系统
    计算机硬件
    类和对象
  • 原文地址:https://www.cnblogs.com/tcz1018/p/13952642.html
Copyright © 2011-2022 走看看