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

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

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

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

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

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

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

javascript 复制代码
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()
	},
}
相关推荐
zru_960217 分钟前
Docker 部署 Redis:快速搭建高效缓存服务
redis·缓存·docker
axinawang1 小时前
springboot整合redis实现缓存
spring boot·redis·缓存
for623 小时前
本地缓存大杀器-Caffeine
缓存·caffeine·本地缓存
有什么东东5 小时前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
听闻风很好吃6 小时前
Redis高级数据类型解析(二)——Set、Sorted Set与Geo实战指南
数据库·redis·缓存
陈大大陈6 小时前
基于 C++ 的用户认证系统开发:从注册登录到Redis 缓存优化
java·linux·开发语言·数据结构·c++·算法·缓存
编程在手天下我有6 小时前
缓存与数据库数据一致性:旁路缓存、读写穿透和异步写入模式解析
数据库·缓存·oracle·软件开发·架构设计·数据一致性
络76 小时前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
云攀登者-望正茂6 小时前
Redis 及其在系统设计中的作用
数据库·redis·缓存
冼紫菜7 小时前
基于Redis实现高并发抢券系统的数据同步方案详解
java·数据库·redis·后端·mysql·缓存·性能优化