Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置

2023年6月11日上午10:22 • JavaScript

Vue.js 是当前最流行的前端框架之一，它非常适用于单页面应用（SPA），但是我们在开发过程中可能会遇到一个问题——页面滚动位置的恢复。因为 SPA 是通过 Ajax 变化实现的，不同页面的 URL 实际上是指向同一页面的不同状态，所以如果用户在一个页面滚动到中间，然后通过后退返回到上一个页面，那么页面滚动条会停留在顶部，而非停留在用户上次浏览的位置。为了解决这个问题，Vue.js 提供了一个 scrollBehavior 选项，在这里我们可以定义一个方法，帮助我们实现后退页面滚动位置的恢复。

实现过程

1. 安装 Vue-router

我们需要先安装 Vue-router 插件，为此我们可以执行以下命令：

npm install vue-router

2. 设置滚动行为

我们需要将 scrollBehavior 选项设置为一个函数，以决定滚动的位置。函数的参数包括三个值：

to：要进入的目标路由
from：当前正要离开的路由
savedPosition：该参数记录了从页面栈中 pop 出去后需要恢复的滚动位置，如果是通过浏览器的前进后退按钮进入的页面，则 savedPosition 有可能为 null。

在函数里，我们可以判断 savedPosition 是否存在，如果存在，我们直接返回该值即可。如果不存在，则返回一个包含 x 和 y 坐标的位置对象（即跳转到目标路由时页面的滚动位置）。需要注意的是，当用户点击前进或后退按钮时，Vue 会自动从堆栈中获取保存的滚动位置并调用该函数，所以我们不需要在这种情况下干预。

下面是一个具体的代码示例：

const router = new VueRouter({
  routes: [
    // 路由信息
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition; // 如果浏览器有保存的滚动位置，直接返回该值
    } else {
      return { x: 0, y: 0 }; // 否则返回默认滚动位置
    }
  }
});

这个示例代码中，当用户进行页面跳转时，scrollBehavior 函数会判断是否有浏览器保存的滚动位置，如果有就跳转到保存的位置，否则跳转到默认位置 (0, 0)。

3. 使用 `router-link` 进行页面跳转

在 Vue 里，我们可以使用 router-link 标签进行页面跳转，这是 Vue-router 提供的路由组件，使用起来与 HTML 中的 <a> 标签类似。下面是一个示例：

<router-link to="/foo">跳转到 Foo 页面</router-link>

这个示例代码中，to 属性指向了要跳转到的页面。

示例说明

为了更好地理解 scrollBehavior 的用法，下面我举两个例子。

示例一：切换页面时保持滚动位置

假设我们有两个页面，分别是 Home 和 Detail，页面 Detail 是从 Home 页面跳转过来的，且用户在 Detail 页面中向下滚动了一定距离。这时，我们希望用户返回 Home 页面后，在 Home 页面中保持上次滚动位置。这个需求可以通过在路由配置中加入 scrollBehavior 选项实现。示例代码如下：

const router = new VueRouter({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/detail', name: 'Detail', component: Detail },
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});

通过在路由配置中加入 scrollBehavior 选项，我们可以实现页面跳转保留上次滚动位置的需求。

示例二：锚点跳转时保持滚动位置

假设我们有一个页面，Scrolling，页面中包含多个锚点，用户点击一个锚点跳转到该位置。如果用户此时返回上一个页面，我们需要保留上次滚动的位置。这个需求同样可以通过 scrollBehavior 选项实现，示例代码如下：

const router = new VueRouter({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/scrolling/:id', name: 'Scrolling', component: Scrolling },
  ],
  scrollBehavior(to, from, savedPosition) {
    // 如果 URL 包含锚点，滚动到该位置
    if (to.hash) {
      return {
        selector: to.hash,
        offset: { x: 0, y: 64 }
      };
    }

    // 如果浏览器有保存的滚动位置，直接返回该值
    if (savedPosition) {
      return savedPosition;
    }

    return { x: 0, y: 0 };
  }
});

这个示例代码中我们通过 to.hash 判断 URL 是否包含锚点，如果是，则使用 selector 和 offset 定位到锚点所在的位置，否则按照之前的逻辑进行滚动位置的恢复。