Nuxt3浏览器返回时无法滚动至保存位置问题

问题分析 #

点击浏览器返回按钮时，savedPosition打印值正确，但页面未滚动到对应位置，核心原因是Nuxt3路由切换时，scrollBehavior执行时机早于页面DOM渲染完成，此时页面内容还未加载完毕，滚动操作无法作用到正确的页面高度上。

修复方案 #

修改app/router.options.ts中的scrollBehavior为异步函数，等待DOM更新后再执行滚动逻辑，同时确保返回的滚动配置包含明确的行为属性：

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

export default <RouterOptions> { 
  async scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      console.log(savedPosition);
      // 等待页面DOM渲染完成
      await nextTick()
      // 扩展savedPosition，添加behavior确保滚动生效
      return { ...savedPosition, behavior: 'auto' }
    } else if (to.hash && to.path === from.path) {
      await nextTick()
      const el = document.querySelector(to.hash)
      return el ? { top: el.offsetTop, left: 0, behavior: "smooth" } : { top: 0 }
    } else {
      await nextTick()
      return { 
        top: 0,
        behavior: 'smooth',
      }
    }
  }
}

额外排查点 #

如果上述方案无效，可检查以下内容：

• 页面是否使用自定义滚动容器（如设置overflow: auto的div）：默认scrollBehavior作用于window，自定义容器需要手动编写滚动逻辑。
• 页面组件的mounted/onMounted钩子是否有强制滚动到顶部的代码：这类逻辑会覆盖路由的滚动行为。

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