Nuxt.js <nuxt-child> 組件

<nuxt-child> 組件

該組件用于顯示嵌套路由場景下的頁面內(nèi)容。

例如：

-| pages/
---| parent/
------| child.vue
---| parent.vue

上面的目錄樹結(jié)構(gòu)會生成下面這些路由配置：

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

為了顯示 child.vue 組件，我們需要在父級頁面組件 pages/parent.vue 中加入 <nuxt-child/>：

<template>
  <div>
    <h1>我是父級頁面</h1>
    <nuxt-child :foobar="123" />
  </div>
</template>

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

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

<!-- 將被轉(zhuǎn)換成以下形式 -->
<div>
  <keep-alive :exclude="['modal']">
    <router-view />
  </keep-alive>
</div>

子組件還可以接收Vue組件等屬性。

可以看這個實際案例：嵌套路由示例

命名視圖

Nuxt v2.4.0 新增

<nuxt-child/>接受name prop 來呈現(xiàn)渲染命名視圖：

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