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

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

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 )方法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue单页使用keep-alive页面返回不刷新的问题

    使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成

  • vue使用keep-alive实现数据缓存不刷新

    到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对系统优化下,添加缓存了. 其实到现在,对于vue还是没有玩通,每深挖一次,就会发现一次vue的精彩,开始不清楚要用什么实现缓存,找了好久,有好几种说法,就是用vuex.vuet或者keep-alive,然后对比了一下,在我认为,vuex和vuet是实现状态管理,重心是在数据处理上:想要实现

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

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

  • vue路由history模式页面刷新404解决方法Koa Express

    目录 为什页面刷新会出现404 Node服务使用Koa框架 Node服务使用Express框架 为什页面刷新会出现404 因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404. 那为什么页面跳转就是正常的?跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的. 建议:非C端系统可以

  • Vue刷新修改页面中数据的方法

    因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:

  • vue缓存之keep-alive的理解和应用详解

    官方解释: <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 主要用于保留组件状态或避免重新渲染. keep-alive 是 Vue 的内置组件,

  • Vue实现父子组件页面刷新的几种常用方法

    Vue实现父子组件页面刷新的几种常用方法

    目录 1.原地页面重新加载(不推荐) 2.空白页面作为过渡 3.使用Provide / Inject组合控制显示 4.v-on:param父组件监听子组件事件 参考文档: 很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下: 1.原地页面重新加载(不推荐) this.$router.go(0) //根据路由重新定

  • 解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）

    问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate()强制刷新 代码案例 <Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled=&quo

  • Vue enter回车导致页面刷新问题及解决

    Vue enter回车导致页面刷新问题及解决

    目录 Vue enter回车导致页面刷新 解决方法 Vue按下enter默认刷新页面bug Vue enter回车导致页面刷新 分页中需要 输入页码进行跳转,但是却出现 跳到指定页面后,页面也刷新了.从而无法满足无刷新的分页.最初代码如下: <form class="zh-skip" action="">     <input type="number" v-model="pageNumber" oninpu

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

  • 在vue中实现简单页面逆传值的方法

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作. vue是一个单页应用,轻量,并且不会重复下载数据.当它从一个页面跳转到另一个页面时,原来的页面的vue实例和

  • ASP.NET 页面刷新的实现方法(包括html,js)

    先看看ASP.NET页面刷新的实现方法: 第一: C# code private void Button1_Click( object sender, System.EventArgs e ) { Response.Redirect( Request.Url.ToString( ) ); } 第二: C# code private void Button2_Click( object sender, System.EventArgs e ) { Response.Write( " < sc

随机推荐