Question

NuxtPage 是 Nuxt 自带的内置组件，需要显示位于 `pages/` 目录中的顶级或嵌套页面。

NuxtPage

是来自 Vue Router 的 <RouterView> 组件的包装器。 NuxtPage 组件接受相同的 name 和 route 属性。

• name: 类型：string：帮助 RouterView 在匹配的路由记录的组件选项中呈现具有相应名称的组件。
• route: 类型：RouteLocationNormalized 是已解析其所有组件的路线位置。
• pageKey: 类型：string 或 function 有助于控制何时重新呈现 NuxtPage 组件。

Nuxt 通过扫描和渲染在 /pages 目录中找到的所有 Vue 组件文件来自动解析 name 和 route。

示例

例如，传递 static 键，NuxtPage 组件在挂载时只渲染一次。

html

<!-- static key -->
<NuxtPage page-key="static" />

或者，可以通过 definePageMeta 从 /pages 目录中 Vue 组件的 <script> 部分将 pageKey 作为 key 值传递。

js

<script setup>
definePageMeta({
  key: route => route.fullPath
})
</script>

案例演示：https://stackblitz.com/github/nuxt/nuxt/tree/main/examples/routing/pages?file=app.vue

Custom Props

此外，NuxtPage 还接受您可能需要向下传递层次结构的自定义道具。 这些自定义道具可通过 Nuxt 应用程序中的attrs访问。

html

<NuxtPage :foobar="123" />

例如，在上面的示例中，可以使用模板中的$attrs.foobar或<script setup>中的useAttrs().foobar来获取foobar的值。

相关阅读：dirs > app