如何使用Inertia.js在表单提交后保持滚动位置并实现路由跳转？

本文共计824个文字，预计阅读时间需要4分钟。

在 `inertia.%3Ca+style%3D%22color%3A` 代码中，本文字详解如何这部分内容需要被替换或修改。以下是修改后的内容：

在使用 Inertia.js 构建 Laravel 单页应用时，常见场景如聊天框（Chatbox）中的消息发送，往往需要异步提交表单、更新数据，并维持当前视图状态——尤其是用户已滚动至页面底部查看最新消息时，提交后若页面自动跳回顶部或 URL 滞留在 /chatbox/send，将严重损害体验。

根本原因在于：默认情况下，Inertia 的 post() 方法会触发「保留当前页面状态」的客户端导航；而控制器中若使用 redirect('index/home')（字符串路径重定向），Inertia 可能无法准确识别命名路由，导致服务端重定向被降级为完整页面刷新（full reload），从而丢失滚动位置、触发顶部跳转，并暴露临时路由。

✅ 正确解法分为前后端两步协同：

1. 前端：精准配置 Inertia 访问选项
在 Vue 组件中调用 this.$inertia.post() 时，必须显式传入以下关键选项：

this.$inertia.post( route('chatbox.send'), // ✅ 使用命名路由（需在 routes/web.php 中定义 name='chatbox.send'） { text: this.text }, { preserveState: false, // ? 强制丢弃当前页面状态，避免因返回相同路由触发“状态复用”导致 URL 不更新 preserveScroll: true // ? 提交后保持当前滚动位置（如聊天框底部），不自动跳顶 } )

2. 后端：返回标准命名路由重定向
Laravel 控制器应始终返回 redirect()->route('home')（而非 redirect('index/home')），确保 Inertia 能识别为「客户端可接管的重定向」，从而执行平滑的前端导航，而非强制整页刷新：

// app/Http/Controllers/ChatboxController.php public function sendChatMessage(Request $request) { $msg = $request->input('text'); $username = Auth::user()->name; // 更简洁写法，避免 only() + 数组取值 if ($this->createChatMessage($msg, $username)) { return redirect()->route('home'); // ✅ 返回命名路由，Inertia 自动处理 URL 更新与状态切换 } // 若失败，建议返回验证错误或空响应（避免 undefined 行为） return back()->withErrors(['text' => '发送失败，请重试']); }

? 补充要点：

• 确保 routes/web.php 中已正确定义命名路由：

  Route::post('/chatbox/send', [ChatboxController::class, 'sendChatMessage'])->name('chatbox.send'); Route::get('/home', [HomeController::class, 'index'])->name('home');

• 若需在重定向后聚焦到特定元素（如新消息区域），可在目标页面组件的 mounted() 或 onMounted() 中调用 element.scrollIntoView({ behavior: 'smooth' })。
• 开发时可通过浏览器 DevTools 的 Network 标签页观察请求响应头：成功 Inertia 重定向会返回 X-Inertia: true 与 X-Inertia-Location 头，表明为客户端导航。

综上，通过前后端协同配置 preserveState: false 与 preserveScroll: true，配合命名路由重定向，即可彻底解决 URL 滞留、页面跳顶问题，在保持 SPA 流畅性的同时提供原生级用户体验。