缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题

最新推荐文章于 2025-05-13 19:13:43 发布

原创最新推荐文章于 2025-05-13 19:13:43 发布 · 3.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#滚动位置 #keep-alive #vue #缓存

工作必备小技巧专栏收录该内容

21 篇文章

订阅专栏

在Vue中使用keep-alive缓存页面时，虽然页面被保留，但滚动条位置不会被记住。为了解决这个问题，可以在路由钩子函数中记录和恢复滚动位置。在beforeRouteEnter和beforeRouteLeave中，分别保存和设置滚动条的位置，通过绑定到特定父元素的scrollTop属性实现。

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

怎样在vue中缓存组件？大家都知道，使用keep-alive组件即可，但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。

是的，keep-alive组件是不会缓存滚动位置的。

怎样缓存滚动位置呢？这是我们这一章讲的问题。

核心思想是在路由钩子函数中将滚动位置记录和复写。

在对应位置加入如下代码即可：

其中scrollBar是要获取到滚动内容的父元素，也就是含有滚动条的元素

export default {
	data() {
		scroll: 0, //记录浏览位置
	}，
	beforeRouteEnter(to, from, next) {
		next(vm => {
			const scrollBar = document.getElementsByClassName('content-scroll-list-wrap')[0]
			scrollBar.scrollTop = vm.scroll
		})
	},
	beforeRouteLeave(to, from, next) {
		const scrollBar = document.getElementsByClassName('content-scroll-list-wrap')[0]
		this.scroll = scrollBar.scrollTop;
		next()
	},
}