Vue - 页面缓存（keep-alive）让容器滚动条回到原来的位置，保存用户浏览位置（从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前）

已于 2025-01-19 15:32:21 修改
阅读量4k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： + Vue + Vue2 开发问题汇总 文章标签： vue.js 缓存 javascript nuxt.js keep-alive
于 2022-08-25 20:49:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/126530343
+ Vue 同时被 2 个专栏收录
250 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue2 开发问题汇总
118 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了在Vue项目中使用keep-alive缓存页面时，如何处理从详情页返回列表页时滚动条位置恢复的问题。通过记录并动态设置滚动条位置，在页面的beforeRouteEnter钩子中实现滚动位置的保存与还原。

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

前言

当 Vue.js / Nuxt.js 项目使用页面缓存（keep-alive）时，
出现了 从详情页返回列表时发现滚动条位置回到了最顶部，并没有停留在进入详情页之前，也找不到问题。

出现该问题非常少见，建议您仔细排查一下，排除其他原因影响到。

本文可以提供给您帮助。

问题分析

正常情况下是不会出现该问题的，滚动条的位置都会被缓存记录，

出现这种情况是因为咱们的页面将子元素容器设置成了 100% 高度，

当容器溢出时，出现滚动条，常见于以下界面：

在这里插入图片描述

直接就是子元素容器 100% 高度，页面 body 滚动条为 0（因为确实没有超出高度），

这时候就出现了该问题。

如果您不是这个问题造成的，

那么下面的解决方案同样适用。

了解本专栏 订阅专栏 解锁全文
VUE—keep-alive缓存并记录滚动位置（列表页进入详情页时缓存并记录滚动位置，返回列表页面不重新请求数据并滚动到离开时的位置）
Poppy_LYT的博客
12-17 2333
1、使用van-list分页加载列表 <template> <div> <van-list ref="list" v-model="loading" // 是否处于加载状态，加载过程中不触发load事件 :finished="finished" // 是否已加载完成，加载完成后不再触发load事件 一般axios请求数组为空设置finished为true即可 finished-text="没有更多了" ...
解决vue无法设置滚动位置的问题
11-30
问题描述 在实现锚点定位的时候发现无法设置滚动条的位置。 在Vue中，使用 document.body.scrollTop=952 无法设置滚动条的高度。 document.body.scrollTop一直是0 原因 因为vue的页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 解决方案 document.documentElement=956 总结 以上所述是小编给大家介绍的解决vue无法设置滚动位置的问题 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小
vue 使用 keepAlive 坑
想成为大神的小白
12-13 6045
1. transition和keep-alive一起使用的时候要将transition作为keep-alive的父容器，否则keep-alive的效果出不来 2. 将需要缓存的页面在路由配置的meta中写上keepAlive: true,不需要缓存的就不用写 3. 有的页面需要缓存，有的页面不需要缓存，所以需要做判断。需要使用第二种方法，因为第一种方法在第一次进入页面的时候keep-a...
vue router.push(‘xxx‘)不跳转问题
最新发布
weixin_47190875的博客
05-10 464
1.父组件未添加 <router-view></router-view>标签。3.一切配置都正确可添加以下代码进行跳转（setup）2.路径或名称与路由不一致如。
vue3 keep-alive使用示例 解决切换页面滚动条不复位问题
qq_27337003的博客
01-29 1573
vue3 keep-alive使用示例 解决切换页面滚动条不复位问题
优化_首页-滚动条位置
m0_65812066的博客
01-10 411
原因：切换到我的页面，页面高度不够，没有滚动条（此滚动条为整个网页的），滚动位置会回到顶部，所以切换到首页，,滚动条还在顶部。因为home组件被keep-alive缓存，当切换出去了该页面只会被保存html和css js，而不会保存滚动位置。知识点：组件被缓存，切走了就会失去激活生命周期方法触发 deactivated。无被缓存，切走了，destroyed摧毁生命周期方法触发。解决：首页失焦（被切换时），在他的路由对象meta中保存滚动位置。keep-alive不会缓存滚动条的位置的！
vue使用keep-alive缓存页面 回到滚动位置
zluz_的博客
03-18 2404
vue使用keep-alive缓存页面 回到滚动位置
利用 keep-alive 实现vue页面返回记住滚动条上次浏览位置
ydongabc
11-04 2000
<keep-alive> 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。 当用它包裹 <router-view> 时，会缓存不活动的组件实例，而不是销毁它们。 和 <transition> 相似，它自身不会渲染一个 DOM 元素。 使用 <keep-alive> 组件后即可使用 activa...
Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存
wocwin的博客
04-10 2718
Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存
vue keep-alive 返回保存滚动条位置
pixle的博客
11-13 1075
export default{ data(){ return{ scrollY:0 } }, //页面离开前保存滚动条距离.page为滚动元素 beforeRouteLeave(to, from, next) { //保存滚动条元素scrollTop值 this.scrollY = document.querySelector(".page").scrollTop; next(); }, //进入页面 恢复滚动条位置 activated() { d
Vue3：返回组件（运用keepAlive保留滚动位置）
米拉
09-16 8129
this.$router.go(-1) 返回上一页最简单实用，现通过路由传参及keepAlive，实现返回保留滚动条位置。注意这两个activated 和 deactivated 这两个生命周期钩子函数。
vue中进入详情页记住滚动位置的方法(keep-alive)
10-17
今天小编就为大家分享一篇vue中进入详情页记住滚动位置的方法(keep-alive)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
12-30
使用 vue 的 keep-alive 的 include 属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新 加需要缓存的列表页面定义一个数据集在 vuex state:{ pageListArr:[] } 列表页的 name 为 proList ,详情页...
vue使用keep-alive保持滚动条位置的实现方法
10-17
然而，当我们使用Vue内置的<keep-alive>组件来缓存组件状态时，会发现滚动条位置并没有被自动保存。为了解决这个问题，我们需要通过一些编程技巧来手动实现滚动条位置的保存与恢复。 首先，要实现滚动条位置的保持...
Vue中keep-alive 实现后退不刷新并保持滚动位置
10-15
在Vue开发中，`<keep-alive>`组件是一个非常重要的特性，它允许我们缓存组件的状态，使得在切换路由或操作后，再次回到该组件时，组件能够保持之前的渲染状态，而不需要重新创建和初始化。这对于提高用户体验，特别...
vue中keep-alive从详情页返回列表页缓存，保持原滚动条位置
m0_58190742的博客
01-08 638
需要从商品列表页diamond中点击某一个商品进入商品详情页productDetail后，从详情页返回到列表页时需保持原来的滚动位置，并使用keep-alive进行组件缓存实现性能优化
使用keep-alive记录上一次滚动的位置，等到返回时仍然滚到之前的位置
flyaway0624的博客
05-18 843
1.首先对当前页面加上keep-alive <template> <div> <keep-alive> <router-view :filter-account="filterAccount" @setFilterAccount="setFilterAccount" :filter-account-id="filterAccountId" v-if="$route.meta.keepAlive" @setFilterAc
解决跳转后返回列表页 滚动条回到顶部
weixin_56270315的博客
04-15 506
问题：web端 元素使用了overflow-y: scroll;跳转详情页返回列表滚动条回到顶部 未定位到上次的滚动位置。首先我们要了解 元素使用了overflow-y: scroll;并设置了宽高 这样的话 滚动条就不是页面级得了。在设置overflow-y: scroll;的元素添加ref 监听路由变化 监听滚动事件。所有没有改变就没有记录滚动条位置。该路由已经使用了缓存的前提下。
Vue项目返回页面保持上次滚动状态
trabecula_hj的博客
04-25 2094
使用背景：首页-water-collection 当前页/列表页-water-collection-list当从列表页跳转详情页面后再返回列表页面需要保持在上次滚动状态每次从首页进入列表后都要滚动到顶部。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端开发大师鸭

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值