vue页面的缓存问题解决(keep-alive + 页面级路由守卫 + 生命周期activated)共同解决

本文探讨了Vue项目中利用keep-alive缓存列表页数据的策略,详细讲解了如何根据不同来源路由决定是否刷新页面内容,并通过beforeRouteEnter实现定制化逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

上面的问题出现之后, 我们分析一下其结果可以简化成我们想要的功能是这样的

列表页中的数据, 我希望, 如果是从详情页跳回来的时候就把页面内容给缓存下来,如果是从首页跳转过来的时候, 就要重新请求数据, 不要缓存

解决步骤

  1. 先把详情页跳转到列表页的问题给解决了
    当我们从详情页跳回到列表页的时候, 总是给我们跳回到了分页的第一页, 这样的体验对用户来说肯定是不好的, 所以这个问题我们可以在 router-view 加上 keep-alive
    在这里插入图片描述
    这是我的真实项目中的代码, 其中 keep-alive :include 表示数组中的列表页会被 缓存,这里提醒一下,数组中的值是 组件中的 name 属性的值 在这里插入图片描述
  2. 当上一步做好了之后, 你会发现, 当我从第n页的任何一个详情跳回的时候, 不会再是第一页了, 这就是我们要的, 然后,Bug 也就出来了, 当我们从首页点击 跳转到列表页的时候, 列表页也被显示成了第N页 (脑瓜子嗡嗡的, 修好了这头, 把那头给搞坏了)
    思考ing
    如果我能得到页面的路由信息就可以, 判断一下路由, 如果是从首页过来的路由, 就执行一下页面初始化的方法, 如果是从详情页过来的内容, 就不让它执行就可以了
    于是想到了全局路由守卫(这个不可取)和 页面级的路由守卫 (beforeRouterEnter)
    就使用 beforeRouterEnter(to,from,next) 这个方法是可以得到路由的,可以知道路由是从哪里来的, 但是我们说的, 知道了从哪里来的之后, 来决定要执行页面上的方法, 呵呵了, 咋执行页面的方法呢, 这个路由守卫中 可是没有 页面this 的, this.methodXXX 你怎么好意思在人家路由守卫中调用呢?
    再思考ing
    路由守卫说,我调用不了方法, 但是我可以在路由信息中写点东西把火种信息传下去, 后面的生命周期函数在调中时, 先看一下 this.$rotue中的信息,就可以看到路由守卫想传的话了。 所以, 我们可以在路由守卫中的 mate 中加上一个参数, 来说明是不是要刷新面页, 调用方法
    常识 当一个页面被加上了 keep-alive 它就会多一个 生命周期函数 activated 方法
    要不要重新加载数据, 就要在 activate方法中判断

下面是主要位置的代码
在这里插入图片描述

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A黄俊辉A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值