這篇打算為 Nuxt 內建元件收尾，介紹最後兩種

• <nuxt-child>
• <nuxt>

回顧上一章，巢狀路由讓 slug 路由下多了 children ，以定義子路由與對應的子頁面元件

/:slug 其下頁面得以用 _slug.vue 父層元件包裹共用邏輯 (包含 template, state 等)

{
  path: '/:slug',
  component: 'pages/_slug.vue',
  children: [
    {
      name: 'slug',
      path: '',
      component: 'pages/_slug/index.vue',
    },

    {
      name: 'slug-comments',
      path: 'comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
},

藉由父層元件的 <nuxt-child> 預留子頁面元件掛載點

<template>
  <div>
    <short-cut-bar></short-cut-bar>
    <nuxt-child> <!-- 若是 /:slug/comment，這邊就是 <comment /> -->
  </div>
</template>

<nuxt-child> 到底做了什麼？

Nuxt 路由拿 vue-router 套件修改而成，<nuxt-link> 包裝 <router-link> 做轉導，<nuxt-child> 則包裝 <router-view> 做 「子頁面掛載點」。

路由交由 Nuxt 自動映射後，與 vue-router 差異在:

1. 對外 props 簡化到剩 keepAlive，只讓你決定要不要換頁保留物件
   文件同 Vue.js keep-alive
2. <transition> 改由 Nuxt Transition 處理，接口透過 nuxt.config.js / page component 設定
3. <transition> 對應的 hook 亦同
   文件同 Vue.js transition
4. 幫你註冊 triggerScroll 事件，代為控制 Router ScrollBehavior

雖然犧牲各頁面操作的彈性，但也簡化操作邏輯，限制網站設計過度發散
好壞由你評斷 (我認為同 AMP，限制雖多但整體行為、作法會變單純)

<nuxt> - 頁面元件 Wrapper

回顧 layouts/front.vue，同樣有預留「掛載點」的功能
用在 layout 內預留「頁面元件 (Page Component) 掛載點」

<template>
  <div>
    <div>My nav bar</div>
    <nuxt/>
    <div>My footer</div>
  </div>
</template>

說穿了，是個頁面元件的外層包裹，藉此元件載入

• 錯誤頁面 (Error Page) 對應元件

• 隱含並透過 <nuxt-child> 載入當前路徑的頁面元件

到此內建元件就介紹完囉！