vue 缓存页面并保留页面当前位置

用户从页面A跳转到页面B，过一会又返回页面A，并且希望页面A依然保留着上次离开时所浏览的位置。该如何实现呢？

步骤 

1. 用 <keep-alive> 包裹页面组件，以缓存页面状态。包裹后，页面组件会增加 activated 和 deactivated 两个生命周期，前者在进入页面时触发，后者在离开页面时触发。由于页面被缓存，因此不会再触发 destroy 和 create 。
2. 在生命周期函数 deactivated 中，记录离开时的位置，存于data中。
3. 在生命周期函数 activated 中，将页面滚动到上次离开的位置。

代码

在App.vue中，用 <kepp-alive> 将 <router-view> 包裹。

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

在 某页面.vue 的 activated 和 deactivated 生命周期函数中写下这些代码。注：这里用了BScroll框架封装scroll，故需自行修改。

  activated() {
    this.$refs.scroll.scrollTo(0, this.saveY, 0);//跳转到（0，this.saveY）的位置，时间为0
    this.$refs.scroll.refresh();//BScroll需要经常刷新，不然会有问题
  },
  deactivated() {
    this.saveY = this.$refs.scroll.scroll.y;//离开页面时，存储位置
  },