<NuxtPage>

源码
<NuxtPage> 组件用于显示位于 pages/ 目录下的页面。

<NuxtPage> 是 Nuxt 提供的内置组件，用于显示位于 app/pages/ 目录下的顶层或嵌套页面。

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

<NuxtPage> 包含以下组件：

<template>
  <RouterView v-slot="{ Component }">
    <!-- 可选，在使用过渡时 -->
    <Transition>
      <!-- 可选，在使用状态保持时 -->
      <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 选项中对应名称的组件。有关 name@view.vue 文件命名约定，请参见 命名视图。
    • type: string
  • route: 已解析其所有组件的路由位置。
    • type: RouteLocationNormalized
  • pageKey: 控制 NuxtPage 组件何时重新渲染。
    • type: string or 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> 一起渲染页面时出现问题。

另外，也可以通过在 /pages 目录下页面组件的 <script> 部分使用 definePageMeta 将 pageKey 作为 key 值传入。

app/pages/my-page.vue
<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath,
})
</script>
Read and edit a live example in Docs > 4 X > Examples > Routing > Pages.

页面引用

要获取页面组件的 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 方法被调用')
}

defineExpose({
  foo,
})
</script>

自定义属性

<NuxtPage> 还接受你可能需要向下传递的自定义属性。

例如，在下面的示例中，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) // 输出：123

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

app/pages/page.vue
<script setup lang="ts">
const attrs = useAttrs()
console.log(attrs.foobar) // 输出：123
</script>
在 Docs > 4 X > Directory Structure > App > Pages 中查看详情