Laravel + Inertia.js 结合 Vue/React 可构建无需传统 API 的 SPA，通过控制器返回组件与数据，由 Inertia 在前端渲染，实现流畅单页体验。
使用 Laravel 与 Inertia.js 结合 Vue 或 React 是构建现代单页应用（SPA）的一种高效方式。它让 Laravel 负责后端逻辑和路由控制，同时通过 Inertia.js 将前端框架（Vue/React）无缝集成，无需编写传统的 API 接口，也能实现 SPA 的流畅体验。
1. Laravel + Inertia.js 的工作原理
Inertia.js 是一个适配器，连接服务端框架（如 Laravel）和前端 JavaScript 框架。它不依赖 REST API，而是通过控制器返回页面组件名和数据，Inertia 在客户端渲染对应 Vue 或 React 组件。
流程如下：
- Laravel 控制器返回 Inertia::render('Page', $data)
- Inertia 将组件名和数据发送到前端
- 前端根据组件名加载对应的 Vue/React 页面并渲染
- 页面跳转通过 Inertia Link 或 inertia.visit() 实现，避免整页刷新
2. 初始化项目环境
先创建 Laravel 项目并安装 Inertia 支持：
立即学习“前端免费学习笔记（深入）”；
composer create-project laravel/laravel my-spa cd my-spa composer require inertiajs/inertia-laravel
发布 Inertia 视图资源：
php artisan inertia:install
这会生成 resources/js/app.js 和根视图 resources/views/app.blade.php。
3. 集成 Vue 或 React
以 Vue 3 为例：
npm install @inertiajs/vue3 vue@^3
配置 resources/js/app.js：
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => require(`./Pages/${name}.vue`),
setup({ el, App, props, plugin }) {
const app = createApp({ render: () => h(App, props) })
app.use(plugin)
app.mount(el)
},
})
若使用 React，替换为 @inertiajs/react 并调整入口文件结构即可。
4. 创建页面与路由
在 resources/js/Pages 下创建 Vue 文件，例如 Home.vue：
欢迎来到首页
{{ time }}
在 Laravel 路由中返回该页面：
// routes/web.php
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Home', [
'time' => now()->format('Y-m-d H:i:s')
]);
});
访问根路径时，Inertia 会自动加载 Home 组件并传入时间数据。
5. 页面跳转与数据提交
使用
关于页面
提交表单使用 form.post()：
const form = useForm({ name: '' })
form.post('/submit')
后端处理完后可返回 Inertia::render() 刷新页面或重定向。
6. 布局与共享数据
使用中间件共享全局数据：
// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request)
{
return [
'auth' => $request->user() ? [
'id' => $request->user()->id,
'name' => $request->user()->name,
] : null,
];
}
在任何组件中通过 props 获取 auth 数据，实现登录状态管理。
基本上就这些。Laravel + Inertia + Vue/React 的组合省去了前后端分离的复杂接口设计，又能享受 SPA 的交互体验，适合中小型项目快速开发。关键是理解 Inertia 的“无 API”模式，把 Laravel 当作页面控制器来用。
