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 安装服务端包：
composer require inertiajs/inertia-laravel
然后设置根路由或中间件：
use InertiaInertia;
Route::get(‘/’, fn () => Inertia::render(‘Home’));
前端使用 vite 或 webpack，安装 Inertia 和适配器（如 Vue）：
npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue@^3.0.0
创建 app.vue 作为根组件，用
编写页面与数据传递
在 Laravel 控制器中返回页面和数据非常直观：
public function index()
{
return Inertia::render(‘User/Index’, [
‘users’ => User::all()->toArray()
])
}
前端 Vue 组件通过 defineProps 接收数据：
表单提交可用 Inertia 提供的 form.post() 方法，自动处理验证错误并回填：
const form = useForm({ name: ” });
form.post(‘/users’);
后端验证失败时，Laravel 正常抛出 ValidationException，Inertia 自动捕获并注入 errors 对象。
处理认证与中间件
Inertia 完美兼容 Laravel 认证系统。你可以使用内置的 Auth 中间件控制访问：
Route::middleware(‘auth’)->group(function () {
Route::get(‘/dashboard’, fn () => Inertia::render(‘Dashboard’));
});
未登录用户访问时，Laravel 会重定向到登录页。你可以在登录控制器中返回 Inertia 页面：
return Inertia::render(‘Auth/Login’);
登录成功后，不要返回 JSON，而是用 redirect()->intended() 跳转，Inertia 会正确加载目标页面。
基本上就这些。Laravel 与 Inertia.js 的结合降低了全栈开发门槛，不用维护两个独立项目也能做出流畅的现代 Web 应用。关键是理解“服务端决定页面，前端负责渲染”这一模式，合理组织代码结构即可。不复杂但容易忽略。