Vue 实现前进刷新,后退不刷新的效果
需求一:
在一个列表页中,第一次进入的时候,请求获取数据。
点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。
也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。
解决方案
假设列表页为 list.vue
,详情页为 detail.vue
,这两个都是子组件。
我们在 keep-alive
添加列表页的名字,缓存列表页。
然后在列表页的 created
函数里添加 ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。
这样就可以解决问题了。
需求二:
在需求一的基础上,再加一个要求:可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。
这样就不需要在列表页的 created
函数里用 ajax 来请求数据了,统一放在 App.vue
里来处理。
触发请求数据有两个条件:
-
从其他页面(除了详情页)进来列表时,需要请求数据。
-
从详情页返回到列表页时,如果详情页
meta
属性中的isRefresh
为true
,也需求重新请求数据。
当我们在详情页中删除了对应的列表项时,就可以将详情页 meta
属性中的 isRefresh
设为 true
。这时再返回到列表页,页面会重新刷新
擦考:https://segmentfault.com/a/1190000019414890
本文作者:Mahmud(مەھمۇد)
本文链接:https://www.cnblogs.com/mahmud/p/11018308.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!