Inertia.js 是连接 Laravel 与 Vue/React 的适配器，无需开发 API 即可构建 SPA；它通过服务端控制器返回数据给前端组件渲染页面，保留 Laravel 认证与中间件机制，利用 Link 组件和 useForm 实现无刷新跳转与表单提交，提升用户体验。
想用 Laravel 和 Inertia.js 快速构建现代化的单页应用（SPA）？不需要完全独立的前端框架，又能享受 SPA 的流畅体验？Inertia.js 正是为此而生。它让 Laravel 控制页面渲染，同时通过 Vue 或 React 提供前端交互，省去 API 开发的复杂性。
什么是 Inertia.js？
Inertia.js 是一个适配器，连接 Laravel 后端与 Vue/React 前端，无需编写 REST API。它将 Laravel 的控制器返回的数据直接传递给前端组件，由前端渲染页面，实现真正的“服务端驱动的单页应用”。
优势包括：
- 无需为每个页面写 API 路由和响应逻辑
- 保留 Laravel 的认证、中间件、会话管理机制
- 前端使用 Vue 或 React 编写，支持组件化开发
- 页面跳转无刷新，提升用户体验
安装与配置 Inertia
在 Laravel 项目中安装 Inertia 非常简单。以 Vue 3 为例：
composer require inertiajs/inertia-laravel然后注册 Inertia 的中间件，在 app/Http/Kernel.php 的 $middlewareGroups 中添加：
创建前端资源目录并安装依赖：
npm install @inertiajs/vue3 vue@^3.2在 resources/js/app.js 中初始化 Inertia：
import { createApp, h } from 'vue'import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => require(`./Pages/${name}.vue`),
setup({ el, App, props }) {
createApp({ render: () => h(App, props) }).mount(el)
},
})
最后在 resources/views/app.blade.php 中引入 JS 并挂载根节点：
创建第一个 Inertia 页面
在 resources/js/Pages 下创建 Home.vue：
欢迎使用 Inertia + Laravel
当前用户：{{ $page.props.auth.user.name }}
在 Laravel 控制器中返回该页面：
use Inertia\Inertia;public function home()
{
return Inertia::render('Home', [
'message' => 'Hello from Laravel!'
]);
}
定义路由：
Route::get('/home', [HomeController::class, 'home']);访问 /home，页面将通过 Inertia 渲染，无刷新加载。
页面跳转与表单提交
Inertia 提供了 Link 组件用于页面跳转：
前往关于页
表单提交使用 useForm：
const form = useForm({
name: '',
email: ''
});
function submit() {
form.post('/users');
}
提交后，Inertia 自动处理响应，更新页面或重定向，错误信息也会自动填充到表单。
基本上就这些。Laravel + Inertia.js 让你用熟悉的后端逻辑，快速搭建现代前端体验。不复杂但容易忽略的是中间件注册和页面解析路径的匹配。只要结构清晰，开发效率大幅提升。
