<NuxtPage>
需要使用 <NuxtPage> 组件来显示位于 pages/ 目录下的页面。
<NuxtPage>
是 Nuxt 内置的组件。它允许您显示位于 pages/
目录中的顶级或嵌套页面。
应该使用
<NuxtPage>
而不是 <RouterView>
,因为前者会额外处理内部状态。否则,useRoute()
可能会返回不正确的路径。属性
name
:告诉RouterView
在匹配的路由记录的组件选项中渲染具有相应名称的组件。- 类型:
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
获取。