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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
Jquery 扩展方法
May 06 Javascript
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
js 轮播效果实例分享
Dec 28 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
vue keep-alive的简单总结
Jan 25 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
PHP 图片上传代码
2011/09/13 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php实现递归的三种基本方式
2020/07/04 PHP
JavaScript 继承使用分析
2011/05/12 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python pandas模块基础学习详解
2019/07/03 Python
简单了解python的break、continue、pass
2019/07/08 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
培训主管的岗位职责
2013/11/23 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
食品工程专业求职信
2014/06/15 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
化工实习心得体会
2014/09/09 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python