<NuxtPage>
<NuxtPage>组件用于显示位于pages/目录中的页面。
<NuxtPage> 是 Nuxt 内置的组件。它可以用来显示位于 pages/ 目录中的顶级或嵌套页面。
属性
name：告诉RouterView在匹配的路由记录的组件选项中使用对应名称渲染组件。- 类型：
string
- 类型：
route：已解析所有组件的路由位置。- 类型：
RouteLocationNormalized
- 类型：
pageKey：控制何时重新渲染NuxtPage组件。- 类型：
string或function
- 类型：
Nuxt 会自动扫描并渲染在
/pages 目录中找到的所有 Vue 组件文件，以解析 name 和 route。示例
例如，通过传递 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 来获取。