<NuxtPage> - 页面组件 #

<NuxtPage>是 Nuxt 自带的一个内置组件。<NuxtPage>组件需要用来显示位于pages目录下的顶层或嵌套页面。

Props #

<NuxtPage>是 Vue Router 中<RouterView>组件的封装。和<RouterView>一样接受name和routeProps，额外还接受一个pageKey属性。

• name

  type:string

  name帮助RouterView在匹配的路由记录的组件选项中使用相应的名称渲染组件。参考Vue Router的命名视图

• route

  type: RouteLocationNormalized

  route是一个路由地址的所有组件都已被解析（如果所有组件都被懒加载）。参考<router-view>的route属性

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

• pageKey

  type: 'string' | 'function'

  pageKey有助于<NuxtPage>组件被重新渲染的时候有更多的控制。

  通过传递static key，<NuxtPage>组件在挂载时只呈现一次。

  如：

  <!-- static key -->
  <NuxtPage page-key=“static” />
  

  也可以在pages目录的 Vue 组件中使用definePageMeta方法传递。

  如：

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

  在线示例

自定义 Props #

<NuxtPage>也接受自定义的Props，如需要将值传递到子组件中时。这些自定义Props可以通过 Nuxt 中的attrs访问。

<NuxtPage :foobar=“123” />

在上面的示例中，可以使用attrs.foobar获得foobar的值。