利用keep-alive做查询列表页面查看某条数据详情,详情页面返回以后,所查看的列表页面的数据全部缓存

文章介绍了如何在Vue应用中利用keep-alive组件来缓存动态组件,特别是当详情页面需要保持状态时。通过在app.vue中添加条件渲染的keep-alive和router-view,并在路由配置中指定需要缓存的页面(如HomeList),可以控制组件的缓存行为,避免页面返回时重新渲染。
摘要由CSDN通过智能技术生成

利用了keep-alive的原理,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。而详情页面返回以后还是在当前页面当前数据需要的就是缓存而不是刷新。

  1. 在根组件app.vue里添加以下代码:

<keep-alive>

<router-view v-if="$route.meta.keepAlive"/>

</keep-alive>

<router-view v-if="!Sroutemeta.keepAlive"/>

  1. 在路由文件里,设置需要用到keep-alive的页面(哪个页面需要就在哪个路由里添加)

{

path:'HomeList',

component:()=>import('../page/HomeList/HomeList'),

meta:{

isUseCache:false,//默认不缓存

keepAlive:true //是否使用keep-alive

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值