NuxtPage

<NuxtPage>组件用于显示位于 pages/目录中的页面

<NuxtPage> 是 Nuxt 内置的组件。它可以用来显示位于 pages/ 目录中的顶级或嵌套页面。

<NuxtPage> 是对 Vue Router 的 <RouterView> 组件的封装。
它接受相同的 name 和 route 属性。

属性

name

告诉 RouterView 在匹配的路由记录的组件选项中使用对应名称渲染组件。

• 类型:string

route

已解析所有组件的路由位置。

• 类型: RouteLocationNormalized

pageKey

控制何时重新渲染 NuxtPage 组件。

• 类型: string 或 function

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 值通过 <script> 部分中的 /pages 目录中的 Vue 组件的 definePageMeta 来传递。

<script setup lang="ts">
  definePageMeta({
    key: (route) => route.fullPath,
  });
</script>

页面的引用

要获取页面组件的 ref，请通过 ref.value.pageRef 访问

<script setup lang="ts">
  const page = ref();

  function logFoo() {
    page.value.pageRef.foo();
  }
</script>

<template>
  <NuxtPage ref="page" />
</template>

自定义属性

此外，<NuxtPage> 还接受你可能需要向下传递的自定义属性。

可以通过 Nuxt 应用的 attrs 访问这些自定义属性

<NuxtPage :foobar="123" />

例如，

在上面的示例中，foobar 的值可以在模板中使用 $attrs.foobar

或在 <script setup> 中使用 useAttrs().foobar 来获取。