vue缓存的keepalive页面刷新数据的方法


Posted in Javascript onApril 23, 2019

用到这个的业务场景是这样的:

a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条,

点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据

实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储;2. 用路由参数带过去;3. 用兄弟组件传值

由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这个方法首先排除

用本地存储的时候,如果不加回退也会吧之前存的历史记录给带过来,所以最终选用了第三种方法

由于a页面需要缓存,所以用到了路由页面的缓存

router.js

{path: '/a',name: 'a',component: a,meta: {keepAlive: true}},

App.vue

<template>
 <div id="app">
  <keep-alive>
    <router-view v-if="$routemetakeepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$routemetakeepAlive"></router-view>
 </div>
</template>

由于用到了keepalive, 所以页面在再次加载的时候是不会触发created而是会触发activated的

所以接收数据,重置数据要写到activated方法下

a页面接收

更改用Vue.set()方法

调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

activated(){
    let that = this
    Self$on('detailShow',(data)=>{ // 接收
      if(!dataisEdit){ // 是新增还是编辑--这个是在跳转的时候带过去的--新增/编辑页面也会根据这个显示内容有所区别
        thataddParamspush(data)
        thataddParams = Arrayfrom(new Set(thataddParamsSubsidyInfos)) // 为避免重复去个重
      }else{



 // thataddParams[thateditIndex] = data // 刚开始想通过直接修改,后来发现不行,因为页面是有缓存的,显示的还是未修改之前的
        Vueset(thataddParams,thateditIndex,data) // 用set方法修改数据
      }
    })

  },

b页面提交(新增/编辑)

submit(){
    if(!thisdetailValidate()){ // 这个是表单校验,如果不通过不然提交
     return;
    }else{
     Self$emit('detailShow',thisaddParams) // 事件分发
     this$routerback();

    }
   }

vue 缓存的keepalive页面刷新数据的话,这个主要还是用到了Vue.set( target, key, value )方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 #Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 #Javascript
Vue infinite update loop的问题解决
Apr 23 #Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 #Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 #Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 #Javascript
vue项目首屏加载时间优化实战
Apr 23 #Javascript
You might like
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP Session机制简介及用法
2014/08/19 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
Yii中表单用法实例详解
2016/01/05 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
什么是JavaScript
2009/08/13 Javascript
js select常用操作控制代码
2010/03/16 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python使用tornado实现登录和登出
2018/07/28 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
2014幼儿园教育教学工作总结
2014/12/17 职场文书
博士给导师的自荐信
2015/03/06 职场文书
惊天动地观后感
2015/06/10 职场文书
追悼会答谢词范文
2015/09/29 职场文书