• <nuxt> 组件

    <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查看例子请点击: 命名视图例子.