在 vue-router 里，滚动行为设置能够对路由切换时的页面滚动位置进行控制，这在单页面应用（SPA）里十分有用，能够为用户带来更流畅、更符合预期的浏览体验。下面为你详细介绍滚动行为设置的作用和使用方法。
作用
-
恢复滚动位置
当用户在某个页面滚动到特定位置后，再导航到其他页面，之后又返回到该页面时，滚动行为设置可以让页面恢复到之前的滚动位置。这在浏览长页面或者列表页时非常实用，用户无需重新滚动到之前查看的位置。 -
滚动到指定位置
在路由切换时，可以让页面滚动到指定的位置，例如页面顶部、某个特定元素的位置等。这有助于引导用户关注页面的重要内容，或者在页面加载时提供更好的视觉效果。 -
自定义滚动效果
可以自定义滚动的动画效果，如平滑滚动、瞬间滚动等，提升用户体验。
使用方法
在创建 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 函数，你可以根据不同的路由切换场景，灵活控制页面的滚动行为。