Laravel 与 Inertia.js 结合实现 SPA，服务端用 Inertia::render() 返回页面状态，前端自动渲染组件。1. 安装 inertiajs/inertia-laravel 和前端库；2. 配置路由和中间件；3. 控制器返回数据，Vue 组件通过 props 接收；4. 表单提交由 form.post() 处理验证错误；5. 认证使用 Laravel 中间件，登录后 redirect()->intended() 跳转。保持传统后端优势同时获得流畅交互体验。

用 Laravel 和 Inertia.js 构建现代单页应用，能让你在不放弃 Laravel 传统后端优势的前提下，获得接近 Vue 或 React 应用的流畅体验。Laravel 负责 API 和服务逻辑，Inertia.js 搭建中间层，把服务器端返回的数据“注入”到前端组件中，实现无刷新页面跳转和状态管理。

理解 Inertia.js 的工作原理

Inertia.js 不是传统意义上的前后端分离框架。它不依赖 REST API 返回 JSON 再由前端手动渲染，而是让 Laravel 控制器返回页面“状态”，Inertia 接收这些状态并自动渲染对应的前端组件。

核心流程如下：

• Laravel 路由匹配请求，调用控制器方法
• 控制器使用 Inertia::render() 返回一个页面名称和数据
• Inertia 捕获响应，在客户端加载对应前端组件（如 Vue 页面）
• 页面组件接收数据并渲染，URL 更新但无完整刷新

这意味着你可以继续使用 Laravel 的认证、中间件、表单验证等特性，同时享受 SPA 的交互体验。

安装与基础配置

在 Laravel 项目中安装 Inertia 需要前后端两部分。

通过 Composer 安装服务端包：

然后设置根路由或中间件：

前端使用 Vite 或 Webpack，安装 Inertia 和适配器（如 Vue）：

创建 App.vue 作为根组件，用 替代 a 标签，用 渲染子页面。

编写页面与数据传递

在 Laravel 控制器中返回页面和数据非常直观：

前端 Vue 组件通过 defineProps 接收数据：

表单提交可用 Inertia 提供的 form.post() 方法，自动处理验证错误并回填：

后端验证失败时，Laravel 正常抛出 ValidationException，Inertia 自动捕获并注入 errors 对象。

处理认证与中间件

Inertia 完美兼容 Laravel 认证系统。你可以使用内置的 Auth 中间件控制访问：

未登录用户访问时，Laravel 会重定向到登录页。你可以在登录控制器中返回 Inertia 页面：

登录成功后，不要返回 JSON，而是用 redirect()->intended() 跳转，Inertia 会正确加载目标页面。

基本上就这些。Laravel 与 Inertia.js 的结合降低了全栈开发门槛，不用维护两个独立项目也能做出流畅的现代 Web 应用。关键是理解“服务端决定页面，前端负责渲染”这一模式，合理组织代码结构即可。不复杂但容易忽略。