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：

在 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 当作页面控制器来用。