<NuxtPage>
需要使用 <NuxtPage> 组件来显示位于 pages/ 目录下的页面。
<NuxtPage> 是 Nuxt 自带的内置组件。它允许你显示位于 pages/ 目录中的顶级或嵌套页面。
应该使用 <NuxtPage> 而不是 <RouterView>，因为前者会额外处理内部状态。否则，
useRoute() 可能会返回不正确的路径。属性
name：告诉RouterView渲染匹配的路由记录的 components 选项中对应名称的组件。- 类型：
string
- 类型：
route：已解析所有组件的路由位置。- 类型：
RouteLocationNormalized
- 类型：
pageKey：控制NuxtPage组件何时重新渲染。- 类型：
string或function
- 类型：
transition：为使用NuxtPage组件渲染的所有页面定义全局过渡。- 类型：
boolean或TransitionProps
- 类型：
keepalive：控制使用NuxtPage组件渲染的页面的状态保留。- 类型：
boolean或KeepAliveProps
- 类型：
Nuxt 通过扫描和渲染在
/pages 目录中找到的所有 Vue 组件文件来自动解析 name 和 route。示例
例如，传递 static 键，NuxtPage 组件仅在挂载时渲染一次。
app.vue
<template>
<NuxtPage page-key="static" />
</template>
你还可以根据当前路由使用动态键。
<NuxtPage :page-key="route => route.fullPath" />
不要在这里使用
$route 对象，因为它会导致 <NuxtPage> 如何使用 <Suspense> 渲染页面出现问题。或者，可以通过 /pages 目录中 Vue 组件的 <script> 部分中的 definePageMeta 将 pageKey 作为 key 值传递。
pages/my-page.vue
<script setup lang="ts">
definePageMeta({
key: route => route.fullPath
})
</script>
在 文档 > 示例 > 路由 > 页面 中阅读和编辑一个实时示例。
页面的 Ref
要获取页面组件的 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>
my-page.vue
<script setup lang="ts">
const foo = () => {
console.log('foo method called')
}
defineExpose({
foo,
})
</script>
自定义属性
此外，<NuxtPage> 还接受你可能需要进一步传递到层次结构中的自定义属性。
这些自定义属性可以通过 Nuxt 应用中的 attrs 访问。
<NuxtPage :foobar="123" />
例如，在上面的示例中，foobar 的值可以使用模板中的 $attrs.foobar 或 <script setup> 中的 useAttrs().foobar 获取。