页面 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
  },
  // ...
})

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/inertia/0.11/pa...

译文地址:https://learnku.com/docs/inertia/0.11/pa...

上一篇 下一篇
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~