最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。
这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。
于是在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有通过看一篇文章而完美解决，所以决定写一篇详细的亲测可行的解决方案。
一共分三步：
- 给 router-view 添加 keep-alive
- 获取并存储当前 scrollTop
- 返回时取出并设置 scrollTop
100多位经验丰富的开发者参与，在 Github 上获得了1000+个star的全栈全平台开源项目想了解或参与吗？
项目地址：https://github.com/cachecats/coderiver
一、给 router-view 添加 keep-alive
先贴出 keep-alive 官方文档，不熟悉的可以先看看文档。
当组件在 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
设置 scrollTop 时是在 activated 方法里，有些文章说获取 scrollTop 在 deactivated 方法里，但经过测试，在 deactivated 方法里并不能准确的获取 scrollTop 值，每次都是 0。具体原因暂时不深究，先解决问题。所以把获取 scrollTop 值放在 item 的点击事件函数里执行。
二、获取并存储当前 scrollTop
页面布局如下：
整个页面是一个
布局代码：
我是标题
{{item}}
复制代码用到了 Vant-ui 的下拉刷新和上拉加载更多组件。
可以看到我一共给了四个 ref ，分别是最外层的 ref="list" ，下拉刷新组件 van-pull-refresh 的 ref="pullRefresh"，列表组件 van-list 的 ref="list"，和每个 item 的 ref="item"。
为什么给出这么多呢？因为这里有个大坑，也是我一直卡住的地方。
我们知道获取滚动位置是用 scrollTop 这个属性，下面我们就依次打印出这几个元素的 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);
this.$router.push({name: "detail", params: {data: item}})
},
复制代码放到 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，达到记住滚动位置的效果。
代码很简单，只有一句话：
activated() {
this.$refs.wrapper.scrollTop = this.scroll
}
复制代码完整的代码如下：
我是标题
{{item}}
复制代码好了，以上就是 Vue 返回记住滚动条位置的详解。
全栈全平台开源项目 CodeRiver
CodeRiver 是一个免费的项目协作平台，愿景是打通 IT 产业上下游，无论你是产品经理、设计师、程序员或是测试，还是其他行业人员，只要有好的创意、想法，都可以来 CodeRiver 免费发布项目，召集志同道合的队友一起将梦想变为现实！
CodeRiver 本身还是一个大型开源项目，致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎所有主流技术栈，主打代码质量。
目前已经有近 100 名优秀开发者参与，github 上的 star 数量将近 1000 个。每个技术栈都有多位经验丰富的大佬坐镇，更有两位架构师指导项目架构。无论你想学什么语言处于什么技术水平，相信都能在这里学有所获。
通过 高质量源码 + 博客 + 视频，帮助每一位开发者快速成长。
项目地址：https://github.com/cachecats/coderiver
您的鼓励是我们前行最大的动力，欢迎点赞，欢迎送小星星✨ ~