Vue2.0 使用keep-alive引发的翻页bug

最新推荐文章于 2025-06-04 12:11:09 发布

Homer_Simpson

最新推荐文章于 2025-06-04 12:11:09 发布

阅读量920

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue keep-alive v-infinite-scroll

本文链接：https://blog.youkuaiyun.com/Homer_Simpson/article/details/88673088

本文介绍了在Vue2.0中使用keep-alive和v-infinite-scroll时遇到的浏览器回退导致页面刷新的问题。当从列表页进入详情页并回退时，页面翻页会重置。解决方法是在deactivated时设置loading为true阻止滚动，在activated时设置loading为false恢复滚动，以避免翻页bug。

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

背景：由于浏览器回退会导致vue页面刷新。尤其是在遇到这种情况时，会引起不好的用户体验：

从可翻页的列表页进入详情页，通过浏览器回退会导致页面刷新，导致翻页page变为第一页。
首先介绍我使用的翻页方法，vue翻页插件：v-infinite-scroll

<div class="bottom_content">
        <no-data style="margin-top: 30%;" v-if="isShow"></no-data>
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
          &