Inertia JS 中文文档页面 Pages
有了 Inertia，应用程序中每个页面都有自己的控制器和相应的 JavaScript 组件。这允许您只检索该页面所需的数据，而不需要 API。
创建页面
页面只是简单的 JavaScript 组件。他们没有什么特别之处。页面作为 props 接收控制器的数据。以下是一个简单的页面组件示例。
Vue 3
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome</h1>
<p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</Layout>
</template>
<script>
import Layout from './Layout'
import { Head } from '@inertiajs/inertia-vue3'
// Vue2: import { Head } from '@inertiajs/inertia-vue'
export default {
components: {
Head,
Layout,
},
props: {
user: Object,
},
}
</script>创建布局
虽然不是必须的，对大多数项目来说，创建页面可扩展的站点布局是有意义的。注意，在上面的示例中，我们将页面内容包装在一个 <layout> 组件中。下面是这样一个组件的示例。这里没有特定的 Inertia。这只是一个标准的 JavaScript 组件。
Vue3
<template>
<main>
<header>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</header>
<article>
<slot />
</article>
</main>
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'
export default {
components: {
Link,
}
}
</script>持久性布局
虽然将布局实现为页面组件的子级很简单，但它会强制在两次访问之间销毁并重新创建布局实例。这意味着在页面之间导航时不能具有永久布局状态。
例如，可能您的播客网站上有一个音频播放器，您希望在用户浏览该网站时播放器继续播放。或者，您可能只是想在页面访问之间的导航中保持滚动位置。在这些情况下，在 Inertia 中使用持久性布局功能是更好的选择。
Vue3
<template>
<div>
<H1>Welcome</H1>
<p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</div>
</template>
<script>
import Layout from './Layout'
export default {
// Using a render function
layout: (h, page) => h(Layout, () => child),
// layout: (h, page) => h(Layout, [page]),
// Using the shorthand
layout: Layout,
props: {
user: Object,
},
}
</script>您也可以使用嵌套布局创建更复杂的布局安排。
Vue3
<template>
<div>
<H1>Welcome</H1>
<p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
</div>
</template>
<script>
import SiteLayout from './SiteLayout'
import NestedLayout from './NestedLayout'
export default {
// Using a render function
layout: (h, page) => {
return h(SiteLayout, () => h(NestedLayout, () => page))
// Vue2: return h(SiteLayout, [
// Vue2: h(NestedLayout, [page]),
// Vue2: ])
},
// Using the shorthand
layout: [SiteLayout, NestedLayout],
props: {
user: Object,
},
}
</script>默认布局
如果您正在使用持久性布局，则可以在 resolve 回调中设置默认页面布局。
import Layout from './Layout'
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default
page.layout = page.layout || Layout
return page
},
// ...
})如果尚未为页面设置布局，此操作将自动将页面布局设置为 Layout。如果需要，可以通过将 layout 设置为 null 来禁用特定页面上的默认布局。
您甚至可以更进一步，根据页面 name 有条件地设置默认页面布局， 该名称可用于 resolve() 方法。例如，您可能不希望将默认布局应用于公共页面。
import Layout from './Layout'
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default
if (page.layout === undefined && !name.startsWith('Public/')) {
page.layout = Layout
}
return page
},
// ...
})本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：