Vue Router 切换路由后滚动位置怎么按页面恢复

Vue Router 切换路由后滚动位置不对，通常不是页面组件没有销毁，而是所有导航都走了同一条滚动规则。解决办法是集中配置 scrollBehavior(to, from, savedPosition)：新页面返回顶部，浏览器前进后退优先返回 savedPosition，带 hash 的地址返回锚点；如果目标内容由异步请求或过渡动画产生，就返回一个等待内容完成的 Promise。

先把三类导航分开，恢复逻辑就清楚了

scrollBehavior 接收目标路由 to、来源路由 from 和历史位置 savedPosition。用户点击菜单进入新页面时，通常应该回到顶部；用户点击浏览器后退或前进时，浏览器会通过 history 状态提供之前保存的位置；地址带有 #comments 时，则应优先滚到对应元素。

不要在每个页面组件的 onMounted 中重复写 window.scrollTo。那样会和路由切换、缓存组件、过渡动画互相抢控制权。路由层只决定“滚到哪里”，页面层负责让目标内容最终存在。

用 scrollBehavior 配置顶部、历史和锚点

下面的配置兼顾了固定顶栏。Vue Router 4 使用 top、left 和 el 描述目标位置；如果项目仍是 Vue Router 3，则对应写法是 x、y 与 selector，不要混用两套 API。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 后退或前进时交还浏览器记录的位置
    if (savedPosition) return savedPosition

    // 地址带锚点时定位元素，给固定顶栏留出 72px
    if (to.hash) {
      return { el: to.hash, top: 72, behavior: 'smooth' }
    }

    // 普通新导航从内容顶部开始
    return { top: 0, left: 0 }
  },
})

export default router

这里的判断顺序很重要：历史位置优先，才能让“详情页滚到一半后返回列表”恢复原处；锚点其次，保证显式的 #comments 意图不会被顶部规则覆盖；其余导航才回到顶部。目标元素不存在时，浏览器无法完成锚点定位，应让页面继续保持当前滚动，不要在路由层伪造一个固定结果。

异步内容和页面过渡完成后再滚动

如果详情正文、评论区或列表高度要等接口返回后才确定，路由刚切换就返回 { top: 0 } 可能只滚到了空壳容器。此时可以让 scrollBehavior 返回 Promise，并在页面完成渲染或过渡结束时 resolve。示例用一个事件桥接页面层，避免把固定延时当成内容完成的证明。

let resolveScrollReady = null

export function markPageReady() {
  // 页面数据和过渡完成后通知路由层
  resolveScrollReady?.()
  resolveScrollReady = null
}

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition
    if (to.hash) {
      return new Promise((resolve) => {
        // 先保存目标，页面 ready 后再查找锚点
        resolveScrollReady = () => resolve({ el: to.hash, top: 72 })
      })
    }
    return { top: 0 }
  },
})

实际项目中，页面组件在数据加载完成、目标节点已渲染后调用 markPageReady()。如果一次导航永远不会产生 hash，就不必为所有页面等待；只对确实依赖异步节点的场景延迟。导航被再次触发时，还要在业务层取消或覆盖上一次等待，避免旧页面完成后影响新页面。

用场景表排查“恢复了但位置不对”

还要确认路由使用的是支持 history 状态的浏览器环境；Vue Router 官方文档特别说明，保存历史滚动位置依赖 history.pushState。如果采用 hash history，地址中的 hash 既可能表示路由本身，也可能表示页面锚点，项目应先统一约定路径和章节 id，避免两个用途冲突。

常见问题

为什么 router.push 后没有恢复上一次位置？

因为 savedPosition 只在浏览器前进、后退的 popstate 导航中提供。程序化跳转应自行决定回顶部、定位 hash，或把列表筛选条件放进路由状态。

固定头部遮住锚点怎么办？

给返回位置增加 top 偏移，或给锚点元素配置 scroll-margin-top。偏移值应和实际头部高度一致，移动端不要直接照搬桌面值。

为什么 Promise 滚动偶尔停在旧页面？

常见原因是上一次导航留下的 resolve 回调没有取消。给每次导航绑定唯一标识，在新导航开始时覆盖旧等待，并只在当前页面节点 ready 后完成定位。