<nuxt> 组件

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

例子 (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
  • nuxtChildKey 属性:

<template>
   <div>
     <nuxt :nuxt-child-key="someKey"/>
   </div>
</template>
  • 页面组件中的key选项:stringfunction
export default {
   key(route) {
     return route.fullPath
   }
}
  • 页面组件中的watchQuery选项:booleanstring []watchQuery选项中指定的查询会被用于构建key。如果watchQuerytrue,则默认使用fullPath

  • name: string (Nuxt v2.4.0 新增)

    • 此 prop 将设置为<router-view />,用于呈现页面组件的命名视图。
    • 默认: default查看例子请点击: 命名视图例子.