vue 返回上一页面保持之前的滚动条位置

前言

• h5 移动端项目，列表返回详情，需要保持之前位置不变。

实现方式

1. 需要保持滚动条的页面路由做标记。
2. 路由钩子监听需要保持滚动的页面的滚动高度并保存。
3. 进入页面时，如果有路由标记，则直接设置滚动高度，否则不变。

代码实现

// router/index.js
{
  path: "/user",
  name: "user",
  component: () => import("../views/user.vue"),
  meta: { scrollTop: 0, keepScroll: true }
},

// ...
// ...

router.beforeEach((to, from, next) => {
  // 记录需要缓存页面的滚动条高度
  if (from.meta.keepScroll) {
    const $content = document.querySelector("#app");
    const scrollTop = $content ? $content.scrollTop : 0;
    from.meta.scrollTop = scrollTop;
  }
  next();
});

// utils/index.js
export const getScroll = vm => {
  const scrollTop = vm.$route.meta.scrollTop;
  const $content = document.querySelector('#app');
  if (scrollTop && $content) {
    $content.scrollTop = scrollTop;
  }
};

// user.vue

import * as util from '@/utils/';

activeted() {
  // 保持滚动条
  util.getScroll(this);

}