• <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-alive 和 keep-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 例子.