摘要:问题由来最近用做前端项目,从查询页面进入详情页时,返回页面需要保留上次的查询条件,表格当前页数。从其他菜单进去,不需要缓存,要保持页面的初始状态。当进入详情页,需要对该条数据进行修改时,修改成功后返回,应该更新列表。
问题由来
1、最近用vue做前端项目,从查询页面进入详情页时,返回页面需要保留上次的查询条件,表格当前页数。
2、从其他菜单进去,不需要缓存,要保持页面的初始状态。
基于上面两种情况,我打算用vue中的keep-alive来缓存页面。
列表项目
. 用vue的内置组件keep-alive来缓存列表页面,再路由出口渲染组件时配置:
在路由选项中,配置meta属性,keepAlive为true即为需要缓存,同时设置isBack属性,用来标识页面是否是从详情页面返回的。
{ name:"borrow", path:"/borrow", component:borrow, meta: { keepAlive:true, isBack: true, }, }
通过beforeRouteEnter(to,from,next),来判断路由是从哪里跳转的,如果是从详情页跳转的,将当前路由对象的meta.isBace设置为true,否则设置为false。(设置在查询页面)
beforeRouteEnter(to, from, next) { if (from.path == "/addborrow") { to.meta.isBack = true; } else { to.meta.isBack = false; } next(); },
为了在其他页面进入时,更新页面中的列表数据和查询条件,我们将在activated钩子函数中挂在页面初次进入时的请求数据。当进入详情页,需要对该条数据进行修改时,修改成功后返回,应该更新列表。
activated() { if (!this.$route.meta.isBack) { this.handleClear("queryForm");/*清空查询条件*/ }else{ this.$route.meta.isBack = false; this.getBorrowList();/*列表重新加载*/ } },参考资料
https://yq.aliyun.com/article...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/100210.html
摘要:需求分析背景数据列表页,滚动加载数据多条数据情况下,点击某一条,进入详细页进行编辑修改,删除操作保存返回上一页在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的解决办法原始的办法在点击详情页的时候,记住浏览位置,传递参数或者存到本 需求分析 背景:1.数据列表页,滚动加载数据;2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作;3.保存返回上一页; 在上面的...
摘要:需求分析背景数据列表页,滚动加载数据多条数据情况下,点击某一条,进入详细页进行编辑修改,删除操作保存返回上一页在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的解决办法原始的办法在点击详情页的时候,记住浏览位置,传递参数或者存到本 需求分析 背景:1.数据列表页,滚动加载数据;2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作;3.保存返回上一页; 在上面的...
摘要:文档在及其更高版本中,和将会在树内的所有嵌套组件中触发。另外,在我们的项目中遇到路由相同但参数不同的情况组件被复用,不更新的问题,官方给出了响应路由参数变化根据参数数据响应 前言 在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态;vue里提供了keep-alive组件用来缓存状态。可以用以下几种方案解决问题...
摘要:在商品列表生命周期中,监听当前父元素的滚动事件,滚动时的回调中,获取到滚动条距离滚动元素即的距离的值,存入到以及在中移除掉当前滚动事件的监听。 -webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止touch:滚动回弹效果,当手指从触摸屏上...
摘要:在商品列表生命周期中,监听当前父元素的滚动事件,滚动时的回调中,获取到滚动条距离滚动元素即的距离的值,存入到以及在中移除掉当前滚动事件的监听。 -webkit-overflow-scrolling介绍 -webkit-overflow-scrolling: auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止touch:滚动回弹效果,当手指从触摸屏上...
阅读 3220·2023-04-25 21:43
阅读 2966·2019-08-29 17:04
阅读 657·2019-08-29 16:32
阅读 1403·2019-08-29 15:16
阅读 2024·2019-08-29 14:09
阅读 2583·2019-08-29 13:07
阅读 2966·2019-08-27 11:02
阅读 1463·2019-08-26 13:32