API: <nuxt> 组件

优质

小牛编辑

146浏览

2023-12-01

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

例子 (layouts/default.vue)：

<template>
  <div>
    <div>页头</div>
    <nuxt/>
    <div>页脚</div>
  </div>
</template>

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

Props:

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

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

<template>
   <div>
     <nuxt :nuxt-child-key="someKey"/>
   </div>
</template>

export default {
  key (route) {
    return route.fullPath
  }
}

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

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

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