Laravel如何与Inertia.js和Vue/React构建现代单页应用-Laravel-PHP中文网

Laravel如何与Inertia.js和Vue/React构建现代单页应用

冰火之心

发布： 2025-12-20 19:46:02

原创

538人浏览过

Laravel + Inertia.js 结合 Vue/React 可构建无需传统 API 的 SPA，通过控制器返回组件与数据，由 Inertia 在前端渲染，实现流畅单页体验。

laravel如何与inertia.js和vue/react构建现代单页应用

使用 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
</font>

登录后复制

这会生成 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：

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

查看详情

<template>
  <h1>欢迎来到首页</h1>
  <p>{{ time }}</p>
</template>

<script setup>
defineProps(['time'])
</script>

登录后复制

在 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. 页面跳转与数据提交

使用进行导航：

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
  <InertiaLink href="/about">关于页面</InertiaLink>
</template>

登录后复制

提交表单使用 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 当作页面控制器来用。

以上就是Laravel如何与Inertia.js和Vue/React构建现代单页应用的详细内容，更多请关注php中文网其它相关文章！