Vue 3应用跳转时浏览器缓存滚动位置问题，求无需逐页配置的优化方案

核心方案使用Vue Router内置的scrollBehavior配置项实现全局控制，无需修改任何单个页面的业务代码，适配40+页面的大型项目成本极低。

方案1：Vue Router全局配置（首选方案） #

适配Vue Router 4.x（Vue3配套版本） #

在路由初始化配置文件中新增滚动行为配置即可：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [...], // 原有40+页面的路由配置无需改动
  // 新增全局滚动行为控制
  scrollBehavior(to, from, savedPosition) {
    // 浏览器前进/后退场景：保留之前的滚动位置
    if (savedPosition) {
      return savedPosition
    }
    // 新页面跳转场景：默认滚动到页面顶部
    return { top: 0, left: 0 }
  }
})

export default router

适配Vue Router 3.x（Vue2配套版本） #

逻辑完全一致，仅参数写法略有调整：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    }
    return { x: 0, y: 0 }
  }
})

export default router

扩展配置：灵活适配特殊页面需求 #

如果存在部分页面需要保留滚动位置、或滚动到指定锚点的场景，可以通过路由元信息meta实现精细化控制：

// 路由配置中给特殊页面添加标记
const routes = [
  {
    path: '/goods-list',
    component: GoodsList,
    meta: { keepScroll: true } // 标记该页面跳转时保留滚动位置
  },
  // 其余页面默认走全局滚动规则
  ...
]

// scrollBehavior中添加判断逻辑
scrollBehavior(to, from, savedPosition) {
  if (savedPosition) return savedPosition
  // 标记了保留滚动的页面不做位置重置
  if (to.meta.keepScroll) return
  // 其余页面统一滚动到顶部
  return { top: 0 }
}

补充兼容：禁用浏览器默认滚动恢复 #

部分浏览器会自带滚动位置缓存逻辑，可能覆盖路由配置的滚动规则，可以在项目入口文件（main.js/main.ts）添加代码关闭该默认行为：

if ('scrollRestoration' in window.history) {
  window.history.scrollRestoration = 'manual'
}

特殊场景适配：keep-alive缓存页面场景 #

如果项目使用了keep-alive缓存页面组件，也可以搭配全局后置路由守卫实现控制，无需修改单个页面代码：

router.afterEach((to) => {
  if (!to.meta.keepScroll) {
    window.scrollTo(0, 0)
  }
})

内容的提问来源于stack exchange，提问作者Ahmed Elbessfy