Vue Router 路由跳转如何实现平滑滚动？scrollBeha vior 配置项使用指南
想让 Vue 应用在路由跳转时，页面滚动也能丝滑过渡吗？这可不是魔法，核心就在于 Vue Router 的 scrollBeha vior 配置。它就像一个精准的导航员，能控制跳转后页面是回到顶部、停留在原处，还是直接定位到某个特定区块。关键在于，你需要正确地返回一个包含滚动坐标或元素选择器的对象，再配合一点 CSS 魔法，就能实现视觉上流畅的“平滑”效果。
基础用法：从返回一个坐标对象开始
配置其实很直观。在创建路由实例时，定义一个 scrollBeha vior 函数，让它返回你想要的滚动位置即可。来看看几个典型的例子：
- 返回
{ top: 0 }：这是最常见的需求，每次路由跳转后，页面都会自动滚动到最顶端。 - 返回
{ top: 100 }：页面会滚动到距离顶部 100 像素的位置。 - 返回
{ el: '#main' }：页面会直接滚动到 ID 为main的那个元素顶部（这里支持使用 CSS 选择器，非常灵活）。 - 返回
{ left: 0, top: 0, beha vior: 'smooth' }：这里多了一个beha vior字段。设置为‘smooth’就是显式告诉浏览器：“请用平滑动画的方式滚过去”。如果不设置，默认是‘auto’，也就是瞬间跳转，没有过渡效果。
保留滚动位置：巧用 sa vedPosition 参数
用户体验中有一个细节很重要：当用户点击浏览器的前进或后退按钮时，他们通常期望页面能回到之前浏览的位置。Vue Router 已经考虑到了这一点，它会将上一次的滚动位置通过 sa vedPosition 参数传递给你。你可以这样利用它：
- 如果
sa vedPosition存在（不是 null），直接返回它，浏览器就会自动还原到之前的滚动位置。 - 如果是普通的编程式跳转（比如
router.push），这个参数会是null。这时候，你就可以执行自己的逻辑，比如返回{ top: 0 }。 - 有个小提示：
sa vedPosition这个特性，通常只在 history 路由模式下，并且用户使用了浏览器的前进/后退按钮（即原生导航）时才有效。
滚动到锚点元素：结合 el 选择器和 offset 偏移
更常见的场景是，跳转到新页面后，需要自动滚动到某个具体的章节或标题，比如文章详情页的某个段落。这时，el 字段就派上用场了。它支持 CSS 选择器，还能配合偏移量进行微调。
立即学习“前端免费学习笔记（深入）”；
{ el: ‘.section-2‘, beha vior: ‘smooth’ }：页面会平滑滚动到第一个 class 为section-2的元素顶部。- 如果页面有固定的导航栏，滚动到目标元素时可能会被遮挡。在 Vue Router 4.1+ 版本中，可以使用
offset进行修正：{ el: ‘#contact‘, offset: { top: -80 } }，这样会在计算位置时向上偏移 80 像素。 - 对于不支持
offset的旧版本，可以手动计算：document.querySelector(el).offsetTop - 80，效果是一样的。
不可或缺的 CSS：启用全局平滑滚动
这是最容易忽略但至关重要的一步。你在 scrollBeha vior 里设置了 beha vior: ‘smooth’，这只是发出了指令。要让浏览器真正执行平滑滚动，必须在根元素上启用这个行为。
- 需要在全局样式文件（比如
App.vue的 style 标签，或者项目的 main.css）中添加一行：html { scroll-beha vior: smooth; }。 - 注意，只设置
body是无效的，必须作用于html元素。 - 好消息是，这个 CSS 属性在现代主流浏览器（Chrome 61+、Firefox 36+、Safari 15.4+）中都有很好的兼容性。
总结一下，实现完美的路由滚动控制，其实是一个“三合一”的协作：scrollBeha vior 函数负责返回目标位置、全局 CSS 为滚动提供平滑能力、而 sa vedPosition 的判断则照顾了浏览历史。三者配合，才能打造出既流畅又符合用户预期的浏览体验。
