Vue Router 通过 scrollBehavior 函数实现滚动位置保存与恢复，savedPosition 仅在浏览器前进/后退时存在且为 {x, y} 坐标；配置中若 savedPosition 存在则返回它，否则返回 {x: 0, y: 0} 回顶，不返回或返回 falsy 值则不滚动。
Vue Router 通过 scrollBehavior 配置函数实现路由切换时的滚动位置保存与恢复，核心在于识别并正确使用 savedPosition 参数——它只在浏览器前进/后退（popstate）导航时存在，且值为上一次离开该历史记录时保存的 { x, y } 坐标。
启用 scrollBehavior 并处理 savedPosition
在创建 Vue Router 实例时配置 scrollBehavior 函数，当 savedPosition 存在时直接返回它，即可自动恢复历史滚动位置：
- 确保路由模式为
history或hash（二者均支持 pushState） -
savedPosition是 null 时，说明是普通跳转（如<router-link>或router.push），此时可返回{ x: 0, y: 0 }回到顶部 - 不返回任何值、返回空对象或 falsy 值（如
undefined、null、false），则不触发滚动
基础实现示例
以下是最简可靠写法，兼顾“前进/后退恢复位置”和“新页面回到顶部”两种场景：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
const router = new VueRouter({
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
return { x: 0, y: 0 };
}
});
配合路由元信息精细化控制
若某些页面不需要恢复滚动（比如表单页、弹窗页），可在路由定义中添加 meta 字段，再在 scrollBehavior 中判断：
立即学习“前端免费学习笔记（深入）”；
- 在路由配置里设置
meta: { keepScroll: true } - 函数内加条件：
if (to.meta.keepScroll && savedPosition)再决定是否返回 - 也可用
to.meta.scrollToTop === false显式禁用顶部滚动
注意兼容性与默认行为
该功能依赖浏览器的 history.pushState 支持，IE9 及以下不生效；未配置 scrollBehavior 时，vue-router 完全不干预滚动，由浏览器默认行为接管——这正是你看到“跳转后还在原位置”的原因。
