API: <nuxt-child> 组件

<nuxt-child> 组件

该组件用于显示嵌套路由场景下的页面内容。

例如:

  1. -| pages/
  2. ---| parent/
  3. ------| child.vue
  4. ---| parent.vue

上面的目录树结构会生成下面这些路由配置:

  1. [
  2. {
  3. path: '/parent',
  4. component: '~/pages/parent.vue',
  5. name: 'parent',
  6. children: [
  7. {
  8. path: 'child',
  9. component: '~/pages/parent/child.vue',
  10. name: 'parent-child'
  11. }
  12. ]
  13. }
  14. ]

为了显示 child.vue 组件,我们需要在父级页面组件 pages/parent.vue 中加入 <nuxt-child/>

  1. <template>
  2. <div>
  3. <h1>我是父级页面</h1>
  4. <nuxt-child :foobar="123" />
  5. </div>
  6. </template>

<nuxt-child/> 接收 keep-alivekeep-alive-props:

<template>
  <div>
    <nuxt-child keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- 将被转换成以下形式 -->
<div>
  <keep-alive :exclude="['modal']">
    <router-view />
  </keep-alive>
</div>

子组件还可以接收Vue组件等属性。

可以看这个实际案例:嵌套路由示例

命名视图

Nuxt v2.4.0 新增

<nuxt-child/>接受name prop 来呈现渲染命名视图:

<template>
  <div>
    <nuxt-child name="top" />
    <nuxt-child />
  </div>
</template>

查看更多例子,请点击 named-views 例子.