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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
python 数据的清理行为实例详解
2017/07/12 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Python秒算24点实现及原理详解
2019/07/29 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
金士达面试非笔试
2012/03/14 面试题
物业管理求职自荐信
2013/09/25 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
洗手间标语
2014/06/23 职场文书
工作失职检讨书范文
2015/05/05 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸