怎样在vue中缓存组件？大家都知道，使用keep-alive组件即可，但是使用keep-alive缓存页面后，发现虽然页面缓存成功了，但是列表的滚动条又自动回到了最上方。
是的，keep-alive组件是不会缓存滚动位置的。
怎样缓存滚动位置呢？这是我们这一章讲的问题。
核心思想是在路由钩子函数中将滚动位置记录和复写。
在对应位置加入如下代码即可：文章来源：https://www.toymoban.com/news/detail-591550.html
其中scrollBar是要获取到滚动内容的父元素，也就是含有滚动条的元素文章来源地址https://www.toymoban.com/news/detail-591550.html
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()
},
}
到了这里，关于缓存滚动位置：解决keep-alive组件缓存滚动位置失败问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
