Vue返回记住滚动条位置
vue 项目返回上一页，滚动到离开时的位置，网上能找到不少方法，以下尝试一种。
一共分三步：
给 router-view 添加 keep-alive
获取并存储当前 scrollTop
返回时取出并设置 scrollTop
例如，首页有个列表，点击列表进入二级页面，返回的时候保持在原位置。首先在首页的视图外套上 keep-alive , include 表示只针对 name = 'Home' 的组件进行缓存，当组件在 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
然后，在首页的 Home 组件内，使用 beforeRouteLeave ，组件内的路由导航守卫，路由离开前，获取滚动高度，并记录在 data 中，当再次进入首页，判断是否存在这个滚动高度，若存在，则设置高度，否则置为 0
data:{
homeTop : 0,
},
activated(){
// do something
console.log('activated home')
document.getElementById('app').scrollTop = this.homeTop || 0
},
beforeRouteLeave (to, from, next) {
// console.log('leave')
let app = document.getElementById('app')
this.homeTop = app.scrollTop || 0
next()
},
移动端
页面布局如下：
整个页面是一个
布局代码：
我是标题
{{item}}
用到了 Vant-ui 的下拉刷新和上拉加载更多组件。
可以看到我一共给了四个 ref ，分别是最外层的 ref="list" ，下拉刷新组件 van-pull-refresh 的 ref="pullRefresh"，列表组件 van-list 的 ref="list"，和每个 item 的 ref="item"。
为什么给出这么多呢？因为这里有个大坑，也是我一直卡住的地方。
我们知道获取滚动位置是用 scrollTop 这个属性，下面我们就依次打印出这几个元素的 scrollTop 。
let wrapperScrollTop = this.$refs.wrapper.scrollTop;
let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
let listScrollTop = this.$refs.list.scrollTop;
let itemScrollTop = this.$refs.item.scrollTop;
console.log('wrapperScrollTop', wrapperScrollTop);
console.log('pullRefreshScrollTop', pullRefreshScrollTop);
console.log('listScrollTop', listScrollTop);
console.log('itemScrollTop', itemScrollTop);
this.$router.push({name: "detail", params: {data: item}})
},
WTF？只有第一个 wrapperScrollTop 有值，其他的都 undefined ！
我也不知道为啥，之前一直是获取后三者的 scrollTop ，一直获取不到，纠结了好久。为什么其他三个获取不到我现在还没整明白，知道原因的大佬可以指点一下。
知道了该获取哪一个元素的 scrollTop 就简单了，得到值只需存储起来即可。
因为使用了 keep-alive，页面被缓存起来了，所以 data 里的数据不会丢失，可以在 data 中声明一个变量 scroll 存储 scrollTop 的值。也可以使用 Vuex。
修改下 clickItem(item) 的代码，将 scrollTop 的值存储起来。
clickItem(item) {
let wrapperScrollTop = this.$refs.wrapper.scrollTop;
let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
let listScrollTop = this.$refs.list.scrollTop;
let itemScrollTop = this.$refs.item.scrollTop;
console.log('wrapperScrollTop', wrapperScrollTop);
console.log('pullRefreshScrollTop', pullRefreshScrollTop);
console.log('listScrollTop', listScrollTop);
console.log('itemScrollTop', itemScrollTop);
//存储 scrollTop 的值
this.scroll = wrapperScrollTop;
this.$router.push({name: "detail", params: {data: item}})
},
三、返回时取出并设置 scrollTop
上面已经介绍过了，使用 keep-alive 之后，每次返回页面会调用 activated 生命周期方法，所以在这个方法里设置之前记住的 scrollTop，达到记住滚动位置的效果。
代码很简单，只有一句话：
this.$refs.wrapper.scrollTop = this.scroll
完整代码如下
我是标题
{{item}}
好了，以上就是 Vue 返回记住滚动条位置的详解。
原文链接：https://blog.csdn.net/solocoder/article/details/88124264