Vue Router实现页面滚动位置实现思路：利用保活页面利用document.documentElement.sc

实现思路：

- 利用保活页面
- 利用document.documentElement.scrollTop获取页面滚动距离
- 调用路由守卫beforeRouterLeave在切换页面前保存这个距离
- 从其他页面内切回来时，再滚动到这个位置实现效果, 打开A页面, 滚动至a处, 切换至B页面, 返回A页面, 此时页面位置为a点而非顶部。

路由出口
 <div class="main">
    <!-- 包裹`<keep-alive>` -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div

页面组件

export default {
    data(){
      scrollTop: 0, // 储存滚动位置
    },
    activated() {
      // 进入该组件后读取数据变量设置滚动位置
      // 注意, 此处由页面是否具有 DTD (如: `<!DOCTYPE html>`), 决定具体选择, 详见参考资料
      document.documentElement.scrollTop = this.scrollTop;
      // document.body.scrollTop = this.scrollTop;
    },
    beforeRouteLeave(to, from, next) {
      // 离开组件时保存滚动位置
      // 注意, 此时需调用路由守卫`beforeRouterLeave`而非生命周期钩子`deactivated`
      // 因为, 此时利用`deactivated`获取的 DOM 信息已经是新页面得了
      this.scrollTop = document.documentElement.scrollTop;
      next();
    },
  }