Laravel Inertia.js入门教程_Laravel构建单页应用指南_运维开发

Laravel Inertia.js入门教程_Laravel构建单页应用指南

发布时间：2025-11-30

点击量：

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 中添加：

\Inertia\Middleware::class

创建前端资源目录并安装依赖：

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：

在 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：

import { useForm } from '@inertiajs/vue3'

const form = useForm({
name: '',
email: ''
});

function submit() {
form.post('/users');
}

提交后，Inertia 自动处理响应，更新页面或重定向，错误信息也会自动填充到表单。

基本上就这些。Laravel + Inertia.js 让你用熟悉的后端逻辑，快速搭建现代前端体验。不复杂但容易忽略的是中间件注册和页面解析路径的匹配。只要结构清晰，开发效率大幅提升。

上一篇：Laravel Sanctum怎么做API认证_Larave

下一篇：Laravel如何定义和使用路由_Laravel路由配置与请