Nuxt3 中文课程《实战全栈开发简书》限时优惠

<NuxtPage>

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

<NuxtPage> 是 Nuxt 内置的组件。它可以用来显示位于 pages/ 目录中的顶级或嵌套页面。

<NuxtPage> 是对 Vue Router 的 <RouterView> 组件的封装。
它接受相同的 nameroute 属性。

属性

  • name:告诉 RouterView 在匹配的路由记录的组件选项中使用对应名称渲染组件。
    • 类型:string
  • route:已解析所有组件的路由位置。
    • 类型:RouteLocationNormalized
  • pageKey:控制何时重新渲染 NuxtPage 组件。
    • 类型:stringfunction
Nuxt 会自动扫描并渲染在 /pages 目录中找到的所有 Vue 组件文件,以解析 nameroute

示例

例如,通过传递 static 键,NuxtPage 组件在挂载时只会渲染一次。

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

你也可以使用基于当前路由的动态键:

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

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

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

页面的引用

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

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

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

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

自定义属性

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

可以通过 Nuxt 应用的 attrs 访问这些自定义属性。

<NuxtPage :foobar="123" />

例如,在上面的示例中,foobar 的值可以在模板中使用 $attrs.foobar 或在 <script setup> 中使用 useAttrs().foobar 来获取。

Read more in Docs > Guide > Directory Structure > Pages.