Inertia.js 中实现表单提交后保持滚动位置并正确跳转至目标路由

Inertia.js 中实现表单提交后保持滚动位置并正确跳转至目标路由

在 Inertia.js + Lara vel 项目中，使用 useForm() 提交聊天消息时，避免页面意外滚动回顶部、同时确保 URL 正确更新为 /home（而非停留于 /chatbox/send），关键在于前端手动控制导航行为，并配合后端返回重定向响应。

在 Inertia.js 应用中处理表单提交，尤其是涉及重定向的场景时，一个常见的困扰是：页面为什么总会“嗖”地一下跳回顶部？而且，URL 有时似乎没有按照预期更新。这背后，其实是 Inertia.js 的默认导航机制在起作用。

当通过 `redirect()` 返回响应时，Inertia 会将其视为一次“手动访问”（manual visit）。默认情况下，它会重置滚动位置并更新 URL。如果配置不当，两个恼人的问题就出现了：一是页面强制滚动到顶部，破坏了用户的浏览连续性；二是页面状态可能没有按预期刷新，导致 UI 显示过时数据。

前端控制：精准导航的关键选项

要解决这个问题，关键在于从前端发起请求时就明确告诉 Inertia 我们想要什么。在 Vue 组件中，使用 `$inertia.post()` 方法时，可以传入一组选项来精细控制行为：

this.$inertia.post(
  route('chatbox.send'),
  { text: this.text },
  {
    preserveState: false,  // 强制刷新组件状态（避免缓存旧数据）
    preserveScroll: true   // 提交瞬间的滚动位置将被保留，不自动跳回顶部
  }
)

• preserveState: false：这个选项告诉 Inertia 不要复用当前页面的组件状态。这意味着后续的响应（比如重定向到 `/home` 后的页面）会以一个全新的状态来渲染。这对于避免因组件缓存而导致 UI 数据不一致的情况至关重要。
• preserveScroll: true：这是阻止页面“自动回顶”的核心。它直接禁用了 Inertia 默认的 `window.scrollTo(0, 0)` 行为，让用户的视口稳稳地停留在当前的位置，例如聊天窗口的底部。

后端协同：返回正确的重定向响应

光有前端配置还不够，后端也需要正确响应。在 Lara vel 控制器中，应该返回一个指向命名路由的重定向，而不是硬编码的路径。这样做不仅更清晰，也提升了代码的可维护性。

public function sendChatMessage(Request $request)
{
    $msg = $request->input('text');
    $username = Auth::user()->name; // 更简洁的写法，无需 only() + 数组解包

    if ($this->createChatMessage($msg, $username)) {
        return redirect()->route('home'); // ✅ 使用命名路由，例如 'home' 对应 /index/home
    }

    // 如果发送失败，建议返回验证错误或 Inertia 支持的 JSON 错误响应
    return back()->withErrors(['text' => '发送失败，请重试']);
}

需要留意的几个细节

为了确保整套流程顺畅运行，有几个细节必须检查到位：

• 路由定义：首先得确认 `route('home')` 已经在 `routes/web.php` 文件中正确定义了。例如：Route::get('/index/home', [HomeController::class, 'index'])->name('home');
• 选项生效范围：`preserveScroll: true` 这个选项只对 Inertia 发起的“手动访问”（比如 `post()`、`visit()`）有效。如果后端返回的是一个普通的 HTTP 重定向（而非 Inertia 能识别的响应），这个选项可能会被忽略。因此，务必确保 Lara vel 的 `HandleInertiaRequests` 中间件已启用，并且响应头中包含 `X-Inertia: true`。
• Composition API 写法：如果你使用的是 Vue 3 的 Composition API 和 `useForm`，那么等价的写法是这样的：

  const form = useForm({ text: '' })
  form.post(route('chatbox.send'), {
    preserveState: false,
    preserveScroll: true
  })

总而言之，通过前端精确配置导航选项，与后端返回标准化的命名路由重定向相互配合，就能在保障用户体验流畅度的同时，精准掌控 URL 的跳转逻辑和页面的滚动行为。这样一来，“提交后页面突然跳回顶部”和“URL 卡在中间路由不动”这两个典型的开发陷阱，也就被彻底规避了。