Vue Router 的 scrollBehavior 用于控制路由跳转后的滚动行为，需手动配置且仅在 HTML5 History 模式下生效；支持恢复历史位置、滚动到锚点、设置偏移及手动缓存滚动位置，注意异步内容加载时的 DOM 渲染时机。
Vue Router 的 scrollBehavior 用于控制路由跳转后的滚动行为，比如返回上一页时恢复之前的滚动位置。它默认不启用，需要手动配置，且只在 HTML5 History 模式下生效（hash 模式不支持）。
基本用法：启用并返回保存的位置
在创建 router 实例时传入 scrollBehavior 函数：
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// 如果有保存的位置（如浏览器后退/前进），直接返回
if (savedPosition) {
return savedPosition;
}
// 否则滚动到顶部
return { top: 0 };
}
});
这个函数接收三个参数：
- to：目标路由对象
- from：来源路由对象
-
savedPosition：仅当触发浏览器原生导航（前进/后退）时存在，是上次离开该路由时的滚动坐标（如
{ x: 0, y: 320 }）
按路由配置滚动偏移或锚点
你可以根据 to 或 from 的路径、元信息（meta）等做差异化处理：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 滚动到某个锚点（如
/article#section2）：if (to.hash) return { el: to.hash }; - 为特定页面设置固定偏移（比如带固定头部）：
if (to.path === '/list') return { top: 64 }; - 根据路由 meta 控制是否恢复位置：
if (to.meta.keepScroll) return savedPosition || { top: 0 };
手动保存滚动位置（补充机制）
Vue Router 不会自动保存所有滚动位置，savedPosition 仅对浏览器历史导航有效。如果想在编程式导航（如 router.push()）后也恢复位置，需自行缓存：
- 监听
beforeEach或组件deactivated钩子，保存当前window.scrollY到router.currentRoute.value.fullPath对应的 Map 中 - 在
scrollBehavior中读取该缓存值，优先使用它，再 fallback 到savedPosition或{ top: 0 }
注意事项
注意：如果页面内容异步加载（如列表数据通过 API 获取），scrollBehavior 执行时 DOM 可能还没更新，导致 el: to.hash 找不到元素。此时可加延迟或监听数据就绪后再滚动：
- 用
nextTick确保 DOM 渲染完成 - 配合
await router.isReady()（Vue Router 4+）避免路由未就绪问题 - 对动态内容，建议在数据加载完成后调用
window.scrollTo()手动滚动
