<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>
渲染页面出现问题。或者,pageKey
可以作为 key
值通过 definePageMeta
从 /pages
目录中 Vue 组件的 <script>
部分传递。
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>
自定义 Props
此外,<NuxtPage>
还接受您可能需要传递到层次结构中的自定义 props。
这些自定义 props 可通过 Nuxt 应用程序中的 attrs
访问。
<NuxtPage :foobar="123" />
例如,在上面的示例中,foobar
的值可以使用模板中的 $attrs.foobar
或 <script setup>
中的 useAttrs().foobar
获取。