API: 组件

组件

该组件只适用于在布局中显示页面组件（即非布局内容）。

例子 (layouts/default.vue)：

  1. <template>
  2.   <div>
  3.     <div>页头</div>
  4.     <nuxt />
  5.     <div>页脚</div>
  6.   </div>
  7. </template>

可以看下这个实际的布局示例。

Props:

  • nuxtChildKey: string
    • 此 prop 将设置为<router-view />，可用于在动态页面和不同路由内进行过渡。
    • 默认: $route.path

有三种方式可以处理 <router-view /> 内部属性的 key。

  1. nuxtChildKey 属性：
  1. <template>
  2.   <div>
  3.     <nuxt :nuxt-child-key="someKey" />
  4.   </div>
  5. </template>
  1. 页面组件中的key选项：string 或 function
  1. export default {
  2.   key(route) {
  3.     return route.fullPath
  4.   }
  5. }
  1. 页面组件中的watchQuery选项：boolean 或 string []

watchQuery选项中指定的查询会被用于构建key。如果watchQuery为true，则默认使用fullPath。

  • name: string (Nuxt v2.4.0 新增)
    • 此 prop 将提供给<router-view />使用，用于渲染命名视图。
    • 默认: default

查看例子请点击： 命名视图例子.