• (二十)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("刷新数据");
    },
    
    咫尺远近却无法靠近的那个你,才敢让你发觉你并不孤寂
  • 相关阅读:
    根分区/tmp满了,卸载home添加给根分区
    Docker容器技术教程
    使用vscode访问和编辑远程服务器文件
    使用 VS Code 远程连接Linux服务器告别xshell
    Docker安装参考文档记录
    yolov5在Centos系统上部署的环境搭建
    YOLOV5四种网络结构的比对
    k8s部署kube-state-metrics组件
    Kubernetes集群部署Prometheus和Grafana
    Prometheus介绍
  • 原文地址:https://www.cnblogs.com/tcz1018/p/13952642.html
Copyright © 2020-2023  润新知