vue-router 中滚动行为设置的妙用

在 vue-router 里，滚动行为设置能够对路由切换时的页面滚动位置进行控制，这在单页面应用（SPA）里十分有用，能够为用户带来更流畅、更符合预期的浏览体验。下面为你详细介绍滚动行为设置的作用和使用方法。

作用

1. 恢复滚动位置
   当用户在某个页面滚动到特定位置后，再导航到其他页面，之后又返回到该页面时，滚动行为设置可以让页面恢复到之前的滚动位置。这在浏览长页面或者列表页时非常实用，用户无需重新滚动到之前查看的位置。

2. 滚动到指定位置
   在路由切换时，可以让页面滚动到指定的位置，例如页面顶部、某个特定元素的位置等。这有助于引导用户关注页面的重要内容，或者在页面加载时提供更好的视觉效果。

3. 自定义滚动效果
   可以自定义滚动的动画效果，如平滑滚动、瞬间滚动等，提升用户体验。

使用方法

在创建 vue-router 实例时，可以通过 scrollBehavior 选项来设置滚动行为。scrollBehavior 是一个函数，它接收三个参数：to、from 和 savedPosition，并返回一个滚动位置对象。

index.ts

import { createRouter, createWebHistory } from 'vue-router';
import { constantRoute } from './routes';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: constantRoute,
  // 滚动行为设置
  scrollBehavior(to, from, savedPosition) {
    // 如果有保存的滚动位置，恢复到该位置
    if (savedPosition) {
      return savedPosition;
    } else {
      // 否则滚动到页面顶部
      return { top: 0 };
    }
  }
});

export default router;

参数解释

• to：目标路由对象，表示即将导航到的路由。
• from：源路由对象，表示当前导航离开的路由。
• savedPosition：保存的滚动位置对象，如果是通过浏览器的前进或后退按钮导航，会包含之前的滚动位置信息；否则为 null。

返回值
scrollBehavior 函数的返回值可以是以下几种类型：

• { x: number, y: number }：表示滚动到指定的 x 和 y 坐标位置。
• { selector: string, offset? : { x: number, y: number }}：表示滚动到指定选择器的元素位置，并可以设置偏移量。
• null 或 undefined：不进行滚动操作。

通过设置 scrollBehavior 函数，你可以根据不同的路由切换场景，灵活控制页面的滚动行为。