如何阻止Nuxt3页面刷新时滚动跳至顶部并保持原位置

在Nuxt3静态站点中，默认的scrollBehavior逻辑会在页面刷新时先将滚动位置重置到顶部，再尝试恢复之前的位置，从而导致视觉上的跳跃。你可以通过自定义路由的滚动行为来解决这个问题：

步骤1：创建路由配置文件 #

在项目根目录下创建app/router.options.ts（如果文件已存在则直接编辑），添加自定义的滚动行为逻辑：

import type { RouterOptions } from '@nuxt/schema'

export default <RouterOptions>{
  scrollBehavior(to, from, savedPosition) {
    // 页面刷新时（from.name为null），直接返回保存的滚动位置
    if (!from.name && savedPosition) {
      return savedPosition
    }
    // 常规路由跳转场景保持默认逻辑：有保存位置则恢复，否则回到顶部
    return savedPosition || { top: 0 }
  }
}

可选优化：完全禁用刷新时的滚动干预 #

如果你希望浏览器自动保持刷新前的滚动位置（即使没有savedPosition），可以调整逻辑返回false，让vue-router不主动修改滚动位置：

import type { RouterOptions } from '@nuxt/schema'

export default <RouterOptions>{
  scrollBehavior(to, from, savedPosition) {
    if (!from.name) {
      // 刷新页面时，不主动设置滚动位置，由浏览器自行恢复
      return savedPosition || false
    }
    // 常规路由跳转仍保持默认逻辑
    return savedPosition || { top: 0 }
  }
}

原理说明 #

• from.name为null是页面刷新的标识（此时并非路由跳转）
• 返回savedPosition会直接恢复之前记录的滚动位置，跳过默认的顶部重置
• 返回false时，vue-router不会执行任何滚动操作，浏览器会自动保留刷新前的滚动位置

内容的提问来源于stack exchange，提问作者Polina Tcaciuc