inertiajs 中文文档页面
页面
使用 Inertia 构建应用程序时，通常每个页面都有自己的控制器/路由和相应的 JavaScript 组件。这样可以仅检索该页面所需的数据 - 无需 API。
此外，在浏览器渲染页面之前，可以检索页面所需的所有数据，从而消除了用户访问应用程序时显示“加载”状态的需要。
创建页面
Inertia 页面只是 JavaScript 组件。如果您以前编写过 Vue、React 或 Svelte 组件，那么您会感到非常熟悉。如下面的示例所示，页面通过 props 接收来自应用程序控制器的数据。
<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>
<template>
<Layout>
<Head title="欢迎" />
<h1>欢迎</h1>
<p>你好 {{ user.name }}，欢迎来到你的第一个 Inertia 应用！</p>
</Layout>
</template>给定上述页面，您可以通过从控制器或路由返回 Inertia 响应 来呈现该页。在本例中，假设此页存储在 Laravel 应用程序中 resources/js/Pages/User/Show.vue 的位置。
use Inertia\Inertia;
class UserController extends Controller
{
public function show(User $user)
{
return Inertia::render('User/Show', [
'user' => $user
]);
}
}创建布局
虽然不是必需的，但对于大多数项目来说，创建一个所有页面都可以扩展的站点布局是有意义的。您可能已经注意到我们上面的页面示例中，我们将页面内容包装在 <Layout> 组件中。以下是这样一个组件的示例：
<script setup>
import { Link } from '@inertiajs/vue3'
</script>
<template>
<main>
<header>
<Link href="/">首页</Link>
<Link href="/about">关于</Link>
<Link href="/contact">联系</Link>
</header>
<article>
<slot />
</article>
</main>
</template>
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：