Vue 滚动行为是 Vue.js 应用中与页面滚动相关的功能，特别是在结合 Vue Router 使用时，可以实现更精细的滚动控制。Vue Router 提供了一个名为 `scrollBehavior` 的配置选项，允许开发者自定义路由切换时的滚动行为。本文将深入探讨 `scrollBehavior` 的工作原理以及如何在实际项目中应用。
`scrollBehavior` 是一个函数，它接受三个参数：`to`、`from` 和 `savedPosition`。`to` 表示即将进入的路由，`from` 表示当前的路由，而 `savedPosition` 在用户通过浏览器前进/后退按钮导航时，会包含之前保存的滚动位置信息。
在 HTML5 history 模式下，Vue Router 的滚动行为功能才可用。这是因为传统 hash 模式下，浏览器的滚动位置与 URL 的改变无关，而在 history 模式下，路由的改变可以像刷新页面一样影响滚动位置。
`scrollBehavior` 函数的返回值决定了滚动位置。你可以返回一个包含 `x` 和 `y` 属性的对象，用于指定滚动到页面的精确坐标，例如 `{ x: 0, y: 0 }` 将滚动到页面顶部。你也可以返回一个选择器字符串，如 `{ selector: '#an1' }`，使得页面滚动到指定元素的位置。
如果返回的是布尔值 `false` 或者一个空对象 `{}`，则不会执行任何滚动操作。这在某些情况下可能很有用，比如你想保持当前的滚动位置不变。
以下是一个使用 `scrollBehavior` 的示例代码：
```javascript
var router = new VueRouter({
mode: "history",
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else if (to.hash) {
return { selector: to.hash };
}
},
routes: [
{ path: "/", component: Home },
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
]
});
```
在这个例子中，当用户通过前进/后退按钮导航时，页面将恢复到之前保存的滚动位置（如果有的话）。如果用户点击带有哈希值的链接（如 `/bar#an1` 或 `/bar#an2`），页面将滚动到对应的元素位置。
Vue 滚动行为提供了强大的自定义能力，可以根据应用需求实现诸如页面回滚、滚动至特定元素等功能。这不仅可以提高用户体验，也能帮助开发者更好地控制应用的导航流程。了解并熟练使用 `scrollBehavior`，可以使你在开发 Vue 应用时更加游刃有余。
