欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置

程序员文章站 2023-12-01 13:48:23
需求分析 背景: 1.数据列表页,滚动加载数据; 2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作; 3.保存返回上一页; 在上面的情况下,想...

需求分析

背景:

1.数据列表页,滚动加载数据;

2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作;

3.保存返回上一页;

在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的;

解决办法

1.原始的办法:在点击详情页的时候,记住浏览位置,传递参数或者存到本地缓存,然后在详情页操作完毕后,返回的时候,路由守卫可以判断,是否详情页跳转回来的,然后让页面滚动到上次记录的位置;

思路是这样,实际操作很麻烦;

2.推荐办法:使用vue动态组件keep-alive,搭配路由守卫函数beforerouteleave,以及activated钩子函数;

对于钩子函数执行顺序,以及作用详细说明,请参考

步骤详解

我的步骤是按照开发思路进行的,场景就是从商品列表页——>商品详细页——>商品列表(数据缓存);

开发之前看到网上好多人都是在路由文件里面配置

meta:{keepalive:true}

但我觉得没有必要,因为列表页不是一直需要缓存数据的,假如从首页进入,则不需要,所以就在路由守卫函数中判断是否需要缓存数据即可;

以下代码,使用list.vue代表列表页;detail.vue代表详细页;

场景1:点击返回,判断路由跳转的是否是需要缓存的列表页:

detail.vue

beforerouteleave (to, from, next) {
 if (to.name === 'm2mboard') {
 to.meta.keepalive = true
 }
 next()
 }

由于keepalive是vue2.0中内置组件,所以设置页面路由meta.keepalive = true即可缓存数据,路由跳转是利用函数this.$router.go(-1);就可以显示在上次浏览的记录位置;

场景2:编辑详细页数据,回到列表页,则需要将修改的数据保存到本地,然后在列表页的缓存数据中,更改显示即可:

detail.vue

beforerouteleave (to, from, next) {
 if (to.name === 'm2mboard') {
 to.meta.keepalive = true
 }
 if (this.ischange) {
 let changedata = {
 inquiryno: this.inquiry.inquiryno,
 inquirytitle: this.inquiry.inquirytitle
 }
 window.sessionstorage.setitem('changedata', json.stringify(changedata))
 }
 to.meta.ischange = this.ischange
 next()
 }

列表页中判断一下,是否需要修改数据:

list.vue

activated () {
 if (this.$route.meta.ischange) {
 let changedata = json.parse(window.sessionstorage.getitem('changedata'))
 this.list.foreach(item => {
 if (item.inquiryno === changedata.inquiryno) {
  item.inquirytitle = changedata.inquirytitle
 }
 })
 }
 }

activated 钩子函数,在keep-alive组件激活时自动执行,判断如果需要修改,从本地取出数据,循环列表数据,找出需要修改的那一条,进行显示数据的修改(因为是临时修改,所以只修改显示的参数即可);

场景3:在详细页点击删除该条数据

detail.vue

beforerouteleave (to, from, next) {
 if (to.name === 'm2mboard' && !this.iddel) {
 to.meta.keepalive = true
 }
 next()
 }

删除操作,可以排除后直接不用缓存,或者跟修改一样的操作,判断是删除,临时删除,列表中缓存的数据也可以;

上面3种情况通常会同时出现,所以最后的写法就是:

detail.vue

beforerouteleave (to, from, next) {
 if (to.name === 'm2mboard' && !this.iddel) {
 to.meta.keepalive = true
 }
 if (this.ischange) {
 let changedata = {
 inquiryno: this.inquiry.inquiryno,
 inquirytitle: this.inquiry.inquirytitle
 }
 window.sessionstorage.setitem('changedata', json.stringify(changedata))
 }
 to.meta.ischange = this.ischange
 next()
 }

list.vue

beforerouteleave (to, from, next) {
 from.meta.keepalive = false
 next()
 },
 activated () {
 if (this.$route.meta.ischange) {
 let changedata = json.parse(window.sessionstorage.getitem('changedata'))
 this.list.foreach(item => {
 if (item.inquiryno === changedata.inquiryno) {
  item.inquirytitle = changedata.inquirytitle
 }
 })
 }
 }

列表页种路由跳转的时候需要进行meta.keepalive = false操作,防止出现,从detail.vue跳转回来后,list.vue在与其他页面进行路由跳转的时候,始终处于缓存状态,数据不更新现象;

注意:在info.vue跳转list.vue的路由活动最好使用this.$router.go(-1),不然回到list.vue页面,数据缓存了,但是页面位置不会是上次访问的位置;具体原因还在研究,哈哈哈...

ok,上面就是在项目开发使用中用到的keep-alive的整个思路;记录一下,以免忘记,还有欢迎参考与指正。

以上所述是小编给大家介绍的vue keepalive 数据缓存工具实现返回上一个页面浏览的位置,希望对大家有所帮助