vue router 的 scrollbehavior 通过 savedposition 实现滚动记忆，历史导航时直接返回该值即可恢复位置；主动跳转时返回 { top: 0 } 置顶；支持 meta 控制（如 noscroll、scrolltotop）和 hash 锚点平滑滚动，可设 offset 避免遮挡。
Vue Router 的 scrollBehavior 是实现页面滚动记忆的核心机制，关键在于正确识别并复用浏览器保存的 savedPosition，同时配合路由元信息做精细化控制。
基础逻辑：靠 savedPosition 恢复历史位置
当用户点击浏览器「后退」或「前进」按钮时，Vue Router 会通过 popstate 事件触发导航，并把上一次离开该页面时的滚动坐标（{ x: number, y: number }）作为第三个参数 savedPosition 传入 scrollBehavior 函数。只要直接返回它，就能还原位置。
- 这个值只在 history 模式下有效，hash 模式不支持
-
savedPosition为空时，说明是主动跳转（比如点击 router-link），不是浏览器导航 - 返回
savedPosition即可自动触发滚动，无需额外操作
典型配置：兼顾跳转与返回
最常用也最接近原生体验的写法是判断 savedPosition 是否存在，有则恢复，无则置顶：
if (savedPosition) return savedPosition-
else return { top: 0 }（或{ x: 0, y: 0 }） - 这样既保证新页面从顶部开始，又让返回操作“记得”原来在哪
增强控制：用路由元信息区分行为
如果某些页面不需要记忆滚动（比如表单页），或希望特定页面始终置顶，可通过 meta 字段标记：
- 在路由定义中加
meta: { noScroll: true }或meta: { scrollToTop: true } -
scrollBehavior中先检查to.meta.noScroll，返回false可禁用滚动 - 检查
to.meta.scrollToTop，则强制返回{ top: 0 }，忽略savedPosition
锚点与偏移：支持平滑滚动到元素
当 URL 带哈希（如 /list#item-123），可结合 to.hash 实现锚点跳转：
- 返回
{ el: to.hash, behavior: 'smooth' }触发平滑滚动 - 加
offset避免被固定头部遮挡，例如offset: { y: -80 } - 注意：若目标元素尚未渲染（如异步组件），需配合
Promise延迟执行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
