vue利用keep-alive缓存页面

最新推荐文章于 2023-04-20 11:24:43 发布

janyxh

最新推荐文章于 2023-04-20 11:24:43 发布

阅读量245

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/janyxh/article/details/118706927

版权

本文详细介绍了如何使用 Vue 的 keep-alive 组件实现页面缓存，以解决列表页滚动加载在返回时需从头开始的问题。通过在 app.vue 中包裹页面、在 routes 中设置缓存标志、判断页面是否需要缓存、存储和读取数据、以及处理滚动条位置，实现了基于 keep-alive 的页面缓存逻辑。作者指出，keep-alive 实际上只负责组件的缓存状态，真正的缓存数据操作仍需手动处理。

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

我有一个列表页，是滚动加载的。每次从详情页返回，刷新数据的话，又从头开始，非常不便。

我研究了2天keep-alive，听说可以缓存数据，保存页面不变。我觉得这正是我需要的。

我按照文档，又按照网上的方法，试了一遍又一遍，终不得解。

怎么回事，为什么页面一直不缓存？为什么还是一次又一次刷新加载？

直到我看到这两段话，感到崩溃！！！
在这里插入图片描述

也就是说，keep-alive跟缓存，根本没有半毛钱关系！

缓存数据，唯一的逻辑是，离开需要缓存的页面时，把数据保存起来。再进入这个页面时，你自己决定要不要刷新，如果不要，就把你保存的数据填回来。

而keep-alive只是帮你记录一下，是否需要缓存。keep-alive有两个生命周期，分别是进入缓存组件和离开缓存组件触发。这样就可以在记录有缓存的组件里，调用这两个函数，把你的数据回显回来。

啊，我研究了2天的东西，被文档绕晕的东西，竟是如此简单，简直不可思议。

既然理通了思路，那我们来看看代码怎么写。

1.在app.vue里面，先把想要缓存的页面包裹起来。

	<keep-alive>
      <router-view
        v-if="$route.meta && $route.meta.keepAlive"
        :key="activeQuery"
      />
    </keep-alive>
    <router-view
      v-if="!$route.meta || !$route.meta.keepAlive"
      :key="activeQuery"
    />