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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
取键盘键位ASCII码的网页
Jul 30 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
webpack优化的深入理解
2018/12/10 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
js实现简单进度条效果
2020/03/25 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
Python的print用法示例
2014/02/11 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Python函数中不定长参数的写法
2019/02/13 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Django组件cookie与session的具体使用
2019/06/05 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
会计电算化应届生求职信
2013/11/03 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python