<NuxtPage>

源文件
要显示位于 pages/ 目录中的页面，必须使用 <NuxtPage> 组件。

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

<NuxtPage> 是对<RouterView>（来自 Vue Router）的包装器。应使用它而不是 <RouterView>，因为前者会额外处理内部状态。否则，useRoute() 可能会返回不正确的路径。

<NuxtPage> 包含以下组件

<template>
  <RouterView v-slot="{ 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 进行设置。

如果您在页面组件中启用了 <Transition>，请确保页面只有一个根元素。

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

在典型的 Vue 应用程序中，新页面组件**仅在**前一个组件完全卸载后才会被挂载。然而，在 Nuxt 中，由于 Vue <Suspense> 的实现方式，新页面组件在卸载前一个组件**之前**就会被挂载。

属性

  • name: 告诉 <RouterView> 渲染匹配的路由记录中 components 选项中具有相应名称的组件。
    • 类型: string
  • route: 路由位置，其所有组件都已解析。
    • 类型: RouteLocationNormalized
  • pageKey: 控制 NuxtPage 组件何时重新渲染。
    • 类型: string 或 function
  • transition: 为使用 NuxtPage 组件渲染的所有页面定义全局过渡。
  • keepalive: 控制使用 NuxtPage 组件渲染的页面的状态保留。
Nuxt 通过扫描和渲染在 /pages 目录中找到的所有 Vue 组件文件，自动解析 name 和 route。

示例

例如，如果传递一个永不改变的 key，<NuxtPage> 组件将只渲染一次——即在它首次挂载时。

app/app.vue
<template>
  <NuxtPage page-key="static" />
</template>

您也可以使用基于当前路由的动态 key

<NuxtPage :page-key="route => route.fullPath" />
不要在这里使用 $route 对象，因为它可能会导致 <NuxtPage> 使用 <Suspense> 渲染页面时出现问题。

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

app/pages/my-page.vue
<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath,
})
</script>
在 Docs > 4 X > Examples > Routing > Pages 中阅读并编辑实时示例。

页面的 Ref

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

app/app.vue
<script setup lang="ts">
const page = ref()

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

<template>
  <NuxtPage ref="page" />
</template>
my-page.vue
<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

自定义 Props

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

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

app/app.vue
<template>
  <NuxtPage :foobar="123" />
</template>

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

app/pages/page.vue
<script setup lang="ts">
const props = defineProps<{ foobar: number }>()

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

如果您没有使用 defineProps 定义 prop，仍然可以直接从页面 attrs 中访问传递给 NuxtPage 的任何 props

app/pages/page.vue
<script setup lang="ts">
const attrs = useAttrs()
console.log(attrs.foobar) // Outputs: 123
</script>
在 文档 > 4 X > 目录结构 > 应用 > 页面 中阅读更多内容。