<NuxtPage>

<NuxtPage> 是 Nuxt 自带的内置组件。它允许你显示位于 pages/ 目录中的顶层页面或嵌套页面。

¥<NuxtPage> is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the pages/ directory.

<NuxtPage> 包含以下组件：

¥<NuxtPage> includes the following components:

<template>
  <RouterView #default="{ Component }">
    <!-- Optional, when using transitions -->
    <Transition>
      <!-- Optional, when using keep-alive -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

默认情况下，Nuxt 不启用 <Transition> 和 <KeepAlive>。你可以在 nuxt.config 文件中启用它们，也可以在 <NuxtPage> 上设置 transition 和 keepalive 属性。如果你想定义特定页面，可以在页面组件的 definePageMeta 中设置它。

¥By default, Nuxt does not enable <Transition> and <KeepAlive>. You can enable them in the nuxt.config file or by setting the transition and keepalive properties on <NuxtPage>. If you want to define a specific page, you can set it in definePageMeta in the page component.

由于 <NuxtPage> 在底层使用 <Suspense>，因此页面更改期间的组件生命周期行为与典型的 Vue 应用不同。

¥Since <NuxtPage> uses <Suspense> under the hood, the component lifecycle behavior during page changes differs from that of a typical Vue application.

在典型的 Vue 应用中，只有在前一个页面组件完全卸载后，才会挂载新的页面组件。但是，在 Nuxt 中，由于 Vue <Suspense> 的实现方式，新的页面组件会在前一个组件卸载之前被挂载。

¥In a typical Vue application, a new page component is mounted only after the previous one has been fully unmounted. However, in Nuxt, due to how Vue <Suspense> is implemented, the new page component is mounted before the previous one is unmounted.

Props

• name：指示 <RouterView> 使用匹配路由记录的 ​​components 选项中对应的名称来渲染组件。
  • 类型：string
• route：已解析所有组件的路由位置。
  • 类型：RouteLocationNormalized
• pageKey：控制 NuxtPage 组件的重新渲染时间。
  • 类型：string 或 function
• transition：为所有使用 NuxtPage 组件渲染的页面定义全局转换。
  • 类型：boolean 或 TransitionProps
• keepalive：控制使用 NuxtPage 组件渲染的页面的状态保存。
  • 类型：boolean 或 KeepAliveProps

示例

¥Example

例如，如果你传递一个永不改变的键，则 <NuxtPage> 组件将仅渲染一次。 - 当它首次挂载时。

¥For example, if you pass a key that never changes, the <NuxtPage> component will be rendered only once - when it is first mounted.

<template>
  <NuxtPage page-key="static" />
</template>

你还可以使用基于当前路由的动态键：

¥You can also use a dynamic key based on the current route:

<NuxtPage :page-key="route => route.fullPath" />

或者，可以通过 definePageMeta 将 pageKey 作为 key 值从 Vue 组件 /pages 目录中的 <script> 部分传递。

¥Alternatively, pageKey can be passed as a key value via definePageMeta from the <script> section of your Vue component in the /pages directory.

<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath
})
</script>

页面引用

¥Page's Ref

要获取页面组件的 ref，请通过 ref.value.pageRef 访问它。

¥To get the ref of a page component, access it through ref.value.pageRef

<script setup lang="ts">
const page = ref()

function logFoo () {
  page.value.pageRef.foo()
}
</script>

<template>
  <NuxtPage ref="page" />
</template>

<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

自定义属性

¥Custom Props

<NuxtPage> 还接受你可能需要在层次结构中进一步传递的自定义 props。

¥<NuxtPage> also accepts custom props that you may need to pass further down the hierarchy.

例如，在下面的示例中，foobar 的值将传递给 NuxtPage 组件，然后再传递给页面组件。

¥For example, in the below example, the value of foobar will be passed to the NuxtPage component and then to the page components.

<template>
  <NuxtPage :foobar="123" />
</template>

我们可以在页面组件中访问 foobar prop：

¥We can access the foobar prop in the page component:

<script setup lang="ts">
const props = defineProps<{ foobar: number }>()

console.log(props.foobar) // Outputs: 123

如果你尚未使用 defineProps 定义 prop，则任何传递给 NuxtPage 的 prop 仍然可以直接从页面 attrs 访问：

¥If you have not defined the prop with defineProps, any props passed down to NuxtPage can still be accessed directly from the page attrs:

<script setup lang="ts">
const attrs = useAttrs()
console.log(attrs.foobar) // Outputs: 123
</script>