Nuxt.js <nuxt> 組件

<nuxt> 組件

該組件只適用于在布局中顯示頁面組件（即非布局內(nèi)容）。

例子 (layouts/default.vue)：

<template>
  <div>
    <div>頁頭</div>
    <nuxt/>
    <div>頁腳</div>
  </div>
</template>

可以看下這個(gè)實(shí)際的布局示例。

Props:

• nuxtChildKey: string此prop將設(shè)置為<router-view />，可用于在動(dòng)態(tài)頁面和不同路由內(nèi)進(jìn)行過渡。默認(rèn): $route.path

有三種方式可以處理 <router-view /> 內(nèi)部屬性的 key。

1. nuxtChildKey 屬性：

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

1. 頁面組件中的key選項(xiàng)：string 或 function

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

1. 頁面組件中的watchQuery選項(xiàng)：boolean 或 string []

watchQuery選項(xiàng)中指定的查詢會(huì)被用于構(gòu)建key。如果watchQuery為true，則默認(rèn)使用fullPath。

• name: string (Nuxt v2.4.0 新增)此 prop 將提供給<router-view />使用，用于渲染命名視圖。默認(rèn): default

查看例子請(qǐng)點(diǎn)擊： 命名視圖例子.