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("刷新数据");
    },
    
    咫尺远近却无法靠近的那个你,才敢让你发觉你并不孤寂
  • 相关阅读:
    Thinking in Ramda: Getting Started
    计算机网络 第一章 绪论(习题)
    URI和URL傻傻分不清
    mac下安装sshpass并配置自动登录
    项目 NodeJS 版本锁定及自动切换
    项目部署篇(一)后端springboot项目打包和部署
    安卓开启GPS,native.js
    native.js,安卓判断APP是否在电池优化白名单
    Self-Supervised Visual Representations Learning by Contrastive Mask Prediction
    wireshark抓包工具使用介绍(附图)
  • 原文地址:https://www.cnblogs.com/tcz1018/p/13952642.html
Copyright © 2011-2022 走看看