Laravel+Inertia+Vue3页面导航未默认重置滚动至顶部问题

常见排查与修复步骤 #

• 检查版本兼容性
  确认Inertia.js、Laravel适配器和Vue3的版本匹配，旧版本可能存在滚动行为bug。运行composer show inertiajs/inertia-laravel和npm list @inertiajs/vue3查看版本，建议升级到最新稳定版。

• 手动添加全局滚动重置逻辑
  如果默认行为失效，可在Inertia全局事件中手动处理滚动。在Vue入口文件（如resources/js/app.js）中添加：

  import { createInertiaApp } from '@inertiajs/vue3';
  import { createApp, h } from 'vue';
  
  createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
      // 监听导航完成事件，强制滚动到顶部
      plugin.router.on('navigate', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
  
      return createApp({ render: () => h(App, props) })
        .use(plugin)
        .mount(el);
    },
  });
  

• 排查页面组件的自定义滚动逻辑
  检查页面组件中是否存在onMounted钩子设置滚动位置、或使用第三方滚动库（如Perfect Scrollbar）干扰默认行为的代码，这类逻辑可能会覆盖Inertia的滚动重置。

• 验证链接的Inertia规范用法
  确保所有页面跳转使用Inertia的<Link>组件或router.visit方法，避免原生<a>标签混合使用——原生链接的刷新行为可能导致滚动逻辑混乱。正确示例：

  <Link :href="route('dashboard')">Dashboard</Link>
  

• 排除浏览器扩展干扰
  部分滚动记忆类浏览器扩展会覆盖页面默认滚动行为，可在无痕模式下测试，同时清除浏览器缓存确保加载最新代码。

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