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

MT
Vue
2023-04-19
43 热度
0 评论

前言

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

实现方式

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

代码实现

// 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);

}

方式2

App.vue页面中使用keep-alive缓存组件

<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>

路由配置里在需要被缓存的页面meta里配置keepAlive属性

{
  path: '/index',
  name: 'index',
  meta: {
    title: ' ',
    keepAlive: true,//此组件需要被缓存
  },
  component: () => import('@/components/index'),
},

实现页面回退之后重新加载，与methods平级写beforeRouteLeave钩子函数，表示在路由页面离开时执行，将该页面的keepAlive属性设为false

beforeRouteLeave (to, from, next) { 
  from.meta.keepAlive = false;
  next();
},

在详情页配置，页面返回时设置列表页keepAlive为true

beforeRouteLeave (to, from, next) {
  if (to.path == "/index") {
    to.meta.keepAlive = true;
  } else {
    to.meta.keepAlive = false;
  }
  next();
},