Vue 返回记住滚动条位置详解

最近用 Vue 做移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，不管之前滚动到哪里，每次返回时都跳到列表最顶部。

这样体验肯定不好，期望的应该是记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。

于是在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有通过看一篇文章而完美解决，所以决定写一篇详细的亲测可行的解决方案。

一共分三步：

• 给 router-view 添加 keep-alive
• 获取并存储当前 scrollTop
• 返回时取出并设置 scrollTop

100 多位经验丰富的开发者参与，在 Github 上获得了 1000+ 个 star 的全栈全平台开源项目想了解或参与吗？
项目地址：https://github.com/cachecats/coderiver

一、给 router-view 添加 keep-alive

先贴出 keep-alive 官方文档，不熟悉的可以先看看文档。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。所以在由详情页返回列表页时，不让列表页刷新。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

设置 scrollTop 时是在 activated 方法里，有些文章说获取 scrollTop 在 deactivated 方法里，但经过测试，在 deactivated 方法里并不能准确的获取 scrollTop 值，每次都是 0。具体原因暂时不深究，先解决问题。所以把获取 scrollTop 值放在 item 的点击事件函数里执行。

二、获取并存储当前 scrollTop

页面布局如下：

整个页面是一个 <rounter-view> ，下面又分了两个 tab，我们列表页是一个组件，位于 title 和 导航栏之间的区域。

布局代码：

<div class="wrapper" ref="wrapper">
    <div class="title">我是标题</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
      <van-list
          ref="list"
          class="list"
          v-model="loadingMore"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoadMore"
      >
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem