您当前的位置: 首页 >  缓存

王佳斌

暂无认证

  • 4浏览

    0关注

    821博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

Nuxt.js - 根据条件,动态控制页面是否缓存(keep-alive-props)

王佳斌 发布时间:2022-08-30 17:35:49 ,浏览量:4

前言

该问题常见于移动端带搜索条件的列表,把列表页面缓存起来,当点击进入详情后再回来可保证数据不刷新且条件存在。 注意!!如下图所示结构的交互,会出现回退到首页后,再次进入列表页 “数据永远不变” 的问题。 【说白了,就是列表页被永远的缓存了,不会请求数据了。解决方案只有动态改变是否缓存页面】 在这里插入图片描述

关于 Nuxt.js 页面缓存,网上教程全都是 “静态”,当您写好要缓存的页面,后续就永远不能改变了,

但很多时候,我们需要 动态控制什么时候需要缓存,什么时候不需要缓存(正常请求数据)。

本文将以最优雅的方案实现,不需要定义什么变量、缓存、状态管理数据、判断等标识,

如下图所示,注意看 questclass ,它是动态控制要不要缓存的页面:

在这里插入图片描述

当进入到列表页后,请求第一波数据,然后紧接着进入缓存状态(此时进入详情页返回后不会刷新,保留着条件),什么时候当你回退到首页时(触发解除缓存),列表页进入正常非缓存状态,再次进入列表时还会正常请求数据。

关注
打赏
1665568777
查看更多评论
立即登录/注册

微信扫码登录

0.0389s