Nuxt JS路由切换时页面无法自动滚动到顶部问题求助

首先根据你使用的Nuxt版本对应排查：

• Nuxt3 版本
  1. 确认文件路径正确：app/router.scrollBehavior.js 必须放在项目根目录的app文件夹下，不要放在其他目录
  2. 检查是否开启了<NuxtPage>的keepalive属性：开启页面缓存后，滚动行为会被缓存的页面状态覆盖，要么关闭keepalive，要么在对应页面的onActivated生命周期钩子中手动执行window.scrollTo(0, 0)
  3. 检查是否配置了页面过渡动画：异步过渡会导致滚动行为在DOM更新完成前触发，滚动位置被后续的页面渲染覆盖，可以修改滚动行为配置适配过渡时长：

  export default function (to, from, savedPosition) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({ x: 0, y: 0 })
      }, 200) // 此处时长和你的页面过渡动画时长保持一致即可
    })
  }
  

• Nuxt2 版本
  你使用的配置路径错误，Nuxt2不支持单独的app/router.scrollBehavior.js文件，需要将配置写在nuxt.config.js的router配置项中：

  // nuxt.config.js
  export default {
    router: {
      scrollBehavior(to, from, savedPosition) {
        return { x: 0, y: 0 }
      }
    }
  }
  

• 通用排查点
  • 检查是否有全局滚动监听事件、自定义布局组件或者第三方滚动类插件修改了默认滚动逻辑，阻止了路由滚动行为触发
  • 若使用hash路由模式，确认跳转时的hash值没有匹配到页面内的锚点元素，否则浏览器会默认滚动到锚点位置，可在滚动行为函数中增加判断跳过锚点逻辑

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