component is required to display pages located in the pages/ directory."> component is required to display pages located in the pages/ directory."> · Nuxt Components">
使用 Vue 和 UI Pro 的仪表板模板

<NuxtPage>

<NuxtPage> 组件是显示 pages/ 目录中的页面所必需的。

<NuxtPage> 是 Nuxt 自带的内置组件。它允许您显示位于 pages/ 目录中的顶级或嵌套页面。

<NuxtPage><RouterView> 组件(来自 Vue Router)的包装器。
它接受相同的 nameroute 属性。
<NuxtPage> 应该代替 <RouterView> 使用,因为前者会对内部状态进行额外的处理。否则,useRoute() 可能返回错误的路径。

属性

  • name: 告诉 RouterView 渲染匹配的路由记录的 components 选项中对应名称的组件。
    • 类型: string
  • route: 路由位置,其所有组件都已解析。
    • 类型: RouteLocationNormalized
  • pageKey: 控制 NuxtPage 组件何时重新渲染。
    • 类型: stringfunction
  • transition: 为使用 NuxtPage 组件渲染的所有页面定义全局过渡。
    • 类型: booleanTransitionProps
  • keepalive: 控制使用 NuxtPage 组件渲染的页面的状态保留。
    • 类型: booleanKeepAliveProps
Nuxt 通过扫描和渲染在 /pages 目录中找到的所有 Vue 组件文件来自动解析 nameroute

示例

例如,传递 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 获取。

文档 > 指南 > 目录结构 > 页面 中了解更多信息。