Vue Router 怎么使用 scrollBehavior 恢复页面滚动位置-Vue.js-PHP中文网

vue router 的 scrollbehavior 用于控制路由跳转后的滚动行为，需手动配置且仅在 html5 history 模式下生效；支持恢复历史位置、滚动到锚点、设置偏移及手动缓存滚动位置，注意异步内容加载时的 dom 渲染时机。

vue router 怎么使用 scrollbehavior 恢复页面滚动位置

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 };
  }
});

这个函数接收三个参数：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

to：目标路由对象
from：来源路由对象
savedPosition：仅当触发浏览器原生导航（前进/后退）时存在，是上次离开该路由时的滚动坐标（如 { x: 0, y: 320 }）

按路由配置滚动偏移或锚点

你可以根据 to 或 from 的路径、元信息（meta）等做差异化处理：

滚动到某个锚点（如 /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 }