vue 实现页面返回记住滚动条位置

# 设置需要缓存的页面

找到 router 文件夹下的 index.js 进行如下修改：

...

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('@/views/index'),
      meta: {
        keepAlive: true,
      }
    },
  ]
})

这里设置需要缓存的页面是 index.vue

# 给路由页面加 keep-alive 标签

找到 src 文件夹下的 App.vue，进行如下修改

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

# 离开页面获取滚动条高度存储，返回页面取出设置滚动条高度

    export default {
      name: "index",
      data() {
        return {
          indexTop: 0,  // 滚动条高度存储
        }
      },
      mounted() {
      },
      methods: {
      },
      /*
      * 进入页面时触发
      * 进入页面后获取 this.indexTop高度赋值给滚动条
      * */
      activated() {
        document.documentElement.scrollTop = this.indexTop || 0;
      },
      /*
      * 离开路由之前执行的函数
      * 离开页面之前获取滚动条的高度，赋值给 this.indexTop
      * */
      beforeRouteLeave(to, from, next) {
        this.indexTop = document.documentElement.scrollTop || 0;
        next();
      }
    }

获取滚动条高度 document.documentElement.scrollTop