Inertia.js 是一个用于构建现代单体(monolith)应用的框架,目标是让开发者在不构建 API 的前提下创建单页应用(SPA),把服务端框架的能力与 React、Vue、Svelte 前端结合起来。
核心概念 Inertia 替代了应用的视图层:控制器不再返回服务端模板,而是返回 JavaScript 页面组件。其 <Link> 组件会拦截点击并通过 XHR 发起访问,从而提供无需整页刷新的 SPA 体验。
主要能力与使用方式 资料按主题提供了参考文档,包括:表单(Form 组件、useForm 辅助函数、验证、错误处理)、链接与导航(Link 组件、手动访问、激活状态)、验证(服务端验证、错误包、错误展示)、页面与布局(页面组件、持久化布局、默认布局)、数据与 Props(共享数据、局部刷新、延迟 Props)、认证(认证模式、CSRF 保护、授权)、安装配置(客户端初始化、服务端设置)、进阶(事件、错误处理、滚动管理、SSR)。
常见模式示例
- 表单提交:可使用 <Form action="/users" method="post"> 组件,或使用 useForm 钩子(如 const form = useForm({ name: '', email: '' }),再调用 form.post('/users'))。
- 导航:<Link href="/users">Users</Link>;<Link href="/logout" method="post" as="button">Logout</Link>;<Link href="/search" :data="{ query }" preserve-state>Search</Link>。
- 展示验证错误:<div v-if="errors.email">{{ errors.email }}</div>。
- 访问共享数据:通过 usePage() 获取,如 const page = usePage(),const user = computed(() => page.props.auth?.user)。
- 保持状态与滚动:<Link href="/form" preserve-state preserve-scroll>Edit</Link>。
- 局部刷新:<Link :only="['users']">Refresh Users</Link>,或 router.visit('/users', { only: ['users'] })。
框架支持 客户端:Vue 3(@inertiajs/vue3)、React(@inertiajs/react)、Svelte(@inertiajs/svelte)。 服务端:Laravel(官方支持),以及 Rails、Phoenix、Symfony(社区适配器)。
适用场景 适合希望以单体架构同时获得服务端框架能力与现代前端组件化体验的项目,尤其是使用 Laravel 搭配 Vue/React/Svelte 的团队。
限制 资料未提供关于收费、价格、平台限制或性能效果的具体说明,这些信息暂未提供。