<NuxtPage>
<NuxtPage> 组件是显示位于 pages/ 目录中的页面的必需组件。
<NuxtPage> 是一个内置组件，它随 Nuxt 一起提供。它允许你显示位于 pages/ 目录中的顶级或嵌套页面。
<NuxtPage> 是 Vue Router 的 <RouterView> 组件的包装器。 它接受相同的
name 和 route 属性。应该使用
<NuxtPage> 而不是 <RouterView>，因为前者对内部状态进行了额外的处理。否则，useRoute() 可能会返回不正确的路径。属性
name: 告诉RouterView渲染具有与匹配路由记录的组件选项中对应名称的组件。- 类型:
string
- 类型:
route: 所有组件都已解析的路由位置。- 类型:
RouteLocationNormalized
- 类型:
pageKey: 控制何时重新渲染NuxtPage组件。- 类型:
string或function
- 类型:
transition: 为使用NuxtPage组件渲染的所有页面定义全局过渡。- 类型:
boolean或TransitionProps
- 类型:
keepalive: 控制使用NuxtPage组件渲染的页面的状态保留。- 类型:
boolean或KeepAliveProps
- 类型:
Nuxt 自动解析
name 和 route，通过扫描并渲染 /pages 目录中找到的所有 Vue 组件文件。示例
例如，传递 static 键时，NuxtPage 组件仅在它被挂载时渲染一次。
app.vue
<template>
<NuxtPage page-key="static" />
</template>
你也可以使用基于当前路由的动态键：
<NuxtPage :page-key="route => route.fullPath" />
在这里不要使用
$route 对象，因为它可能会导致 <NuxtPage> 如何使用 <Suspense> 渲染页面的问题。或者，你也可以在 /pages 目录中 Vue 组件的 <script> 部分的 definePageMeta 函数中通过 key 值传递 pageKey。
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.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 方法被调用')
}
defineExpose({
foo,
})
</script>
自定义属性
此外，<NuxtPage> 也接受你可能需要传递到更下层层次的自定义属性。
这些自定义属性可以通过 attrs 在 Nuxt 应用中访问。
<NuxtPage :foobar="123" />
例如，在上面的示例中，foobar 的值可以通过 $attrs.foobar 在模板中或 useAttrs().foobar 在 <script setup> 中访问。