Vue Router 返回后记住滚动条位置的实现方法

北风几吹夏 / 2024-08-23 / 原文

要在 Vue Router 中实现返回时记住滚动条位置的功能，可以利用 Vue Router 提供的 scrollBehavior 函数。这允许在导航时控制页面的滚动行为，包括返回之前访问的页面时恢复到之前的滚动位置。

实现方法

以下是一个示例，展示如何在 Vue 3 中使用 scrollBehavior 实现返回时记住滚动条位置：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  // 你的路由配置
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      // 如果存在保存的位置（即用户使用浏览器的前进/后退按钮），则返回到该位置
      return savedPosition;
    } else {
      // 否则滚动到顶部
      return { top: 0 };
    }
  }
});

export default router;

解释

scrollBehavior 函数:
- to：即将进入的目标路由对象。
- from：当前导航离开的路由对象。
- savedPosition：保存的滚动位置。如果使用了浏览器的前进/后退按钮，这个值会被保存下来。
保存的滚动位置:
- 当 savedPosition 存在时，表示这是用户通过浏览器的前进/后退按钮进行的导航，此时我们希望恢复到之前的滚动位置。因此返回 savedPosition 对象，它包含了 top 和 left 值（即滚动条的纵向和横向位置）。
滚动到顶部:
- 如果 savedPosition 不存在，这意味着用户是通过点击链接或编程导航到新页面。此时我们通常希望页面滚动到顶部，所以返回 { top: 0 }。

可选的增强功能

还可以根据 to 和 from 路由的不同状态来定制更多的滚动行为。例如：

仅在特定路由或页面上应用滚动行为。
根据锚点或 hash 值滚动到特定位置。

示例：处理 hash 滚动

可以添加对 hash 的处理，如果用户导航到一个带有 hash 的 URL，则滚动到对应的元素：

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition;
  } else if (to.hash) {
    return {
      el: to.hash,
      behavior: 'smooth',
    };
  } else {
    return { top: 0 };
  }
}

在这个示例中，如果路由中带有 hash，例如 #section2，页面将平滑滚动到对应的元素位置。

https://www.jb51.net/javascript/2975655dl.htm