vue 的路由互相切换时怎么保持当前页面的滚动的距离？最新方案来了

最近一直有人私信我，反映之前的一篇文章《vue 的路由互相切换时怎么保持当前页面的滚动的距离？》存在问题，今天就贴出来新的思路，还得要自己多思考一下，拒绝CV，确保无问题。

直接贴代码：

<van-tabs v-model="active">
      <van-tab title="标签 1">
        <van-list
          v-model="loading1"
          :finished="finished1"
          finished-text="没有更多了"
          @load="onLoad1"
        >
          <van-cell v-for="item in list1" :key="item" :title="item" />
        </van-list>
      </van-tab>
      <van-tab title="标签 2">
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoad2"
        >
          <van-cell v-for="item in list2" :key="item" :title="item" />
        </van-list>
      </van-tab>
      <van-tab title="标签 3">
        <div class="forBox" :style="randomRgb()" v-for="item in 60" :key='item' @click="handleClick(item)">{{item}} ===>vote---3</div>
      </van-tab>
      <van-tab title="标签 4">
        <div class="forBox" :style="randomRgb()" v-for="item in 100" :key='item'>{{item}} ===>vote---4</div>
      </van-tab>
    </van-tabs>

tab改变的时候会改变active的值，接下来设置监听器，这一步是关键

watch: {
    active (news, old) {
      this.scrollRecord['tab' + old] = parseInt(this.scroll) // 离开的tab栏滚动的高度
      if (this.scrollRecord['tab' + news]) {
        this.$nextTick(() => { // 坑不加他会出现滚动距离不够，限制于上一个tab高度问题
          window.scrollTo(0, parseInt(this.scrollRecord['tab' + news])) // 进入的tab栏滚动到记录的距离
        })
      } else {
        window.scrollTo(0, 0)
      }
    }
  },

思路是

• 1. watch监听tab的变化，获取新的tabID 和旧的tabID
• 2. 旧的tabID 滚动的距离存储在scrollRecord对象里，比如scrollRecord.tab1 = 200
• 3. 新的tabID 首先判断scrollRecord存储的是否有新的tabID键值 比如scrollRecord.tab1 == null ? TODO : TODO
• 4. 如果有 就window.scrollTo 到对应位置 ，如果没有就滚动到顶部

有问题，私信我，能帮上一定帮