Back to Details

inertia

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Inertia.js

Inertia.js

Modern monolith framework for building SPAs without APIs. Combine server-side framework power with React/Vue/Svelte frontends.
无需API即可构建单页应用（SPA）的现代单体框架。将后端框架的能力与React/Vue/Svelte前端相结合。

Core Concept

核心概念

Inertia replaces your view layer - controllers return JavaScript page components instead of server-side templates. The 
<Link>
component intercepts clicks for XHR visits, providing SPA experience without full page reloads.
Inertia替代了你的视图层——控制器返回JavaScript页面组件而非服务端模板。
<Link>
组件会拦截点击事件，通过XHR请求实现页面访问，无需整页刷新即可提供SPA体验。

Quick Reference

快速参考

Basic Page Structure

基础页面结构

vue
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>

<template>
    <Layout>
        <Head title="Welcome" />
        <h1>Welcome {{ user.name }}</h1>
    </Layout>
</template>
vue
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>

<template>
    <Layout>
        <Head title="Welcome" />
        <h1>Welcome {{ user.name }}</h1>
    </Layout>
</template>

Navigation

导航

vue
<Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link>
vue
<Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link>

Form Submission

表单提交

vue
<!-- Simple Form Component -->
<Form action="/users" method="post">
    <input type="text" name="name" />
    <button type="submit">Create</button>
</Form>

<!-- useForm Hook -->
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({ name: '', email: '' })
function submit() { form.post('/users') }
</script>
vue
<!-- Simple Form Component -->
<Form action="/users" method="post">
    <input type="text" name="name" />
    <button type="submit">Create</button>
</Form>

<!-- useForm Hook -->
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({ name: '', email: '' })
function submit() { form.post('/users') }
</script>

Documentation by Topic

按主题分类的文档

TopicReference FileDescription
Formsforms.mdForm component, useForm helper, validation, error handling
Links & Navigationlinks.mdLink component, manual visits, active states
Validationvalidation.mdServer-side validation, error bags, error display
Pages & Layoutspages-layouts.mdPage components, persistent layouts, default layouts
Data & Propsdata-props.mdShared data, partial reloads, deferred props
Authenticationauthentication.mdAuth patterns, CSRF protection, authorization
Setupsetup.mdClient-side initialization, server-side setup
Advancedadvanced.mdEvents, error handling, scroll management, SSR
主题参考文件说明
表单forms.mdForm组件、useForm工具函数、验证、错误处理
链接与导航links.mdLink组件、手动页面访问、激活状态
验证validation.md服务端验证、错误集合、错误展示
页面与布局pages-layouts.md页面组件、持久化布局、默认布局
数据与Propsdata-props.md共享数据、部分重载、延迟加载Props
身份验证authentication.md认证模式、CSRF防护、授权
环境搭建setup.md客户端初始化、服务端配置
进阶内容advanced.md事件、错误处理、滚动管理、SSR

Common Patterns

常见模式

Displaying Validation Errors

显示验证错误

vue
<div v-if="errors.email">{{ errors.email }}</div>
vue
<div v-if="errors.email">{{ errors.email }}</div>

Accessing Shared Data

访问共享数据

vue
<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script>
vue
<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script>

Preserving State/Scroll

保留状态/滚动位置

vue
<Link href="/form" preserve-state preserve-scroll>Edit</Link>
vue
<Link href="/form" preserve-state preserve-scroll>Edit</Link>

Partial Reloads

部分重载

vue
<Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })
vue
<Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })

Framework Support

框架支持

  • Client: Vue 3 (
    @inertiajs/vue3
    ), React (
    @inertiajs/react
    ), Svelte (
    @inertiajs/svelte
    )
  • Server: Laravel (official), Rails, Phoenix, Symfony (community adapters)
  • 客户端： Vue 3 (
    @inertiajs/vue3
    ), React (
    @inertiajs/react
    ), Svelte (
    @inertiajs/svelte
    )
  • 服务端： Laravel (官方支持), Rails, Phoenix, Symfony (社区适配)