Nuxt Routing 自動映射介紹過，/pages 的 Vue File 對應各個頁面。
雖然寫法一樣，為了讓頁面定義的寫法吻合 Vue File 慣例，除了先前介紹過 head、layout
Nuxt 頁面元件擴充了以下屬性:
| 屬性名 | 用途描述 |
|---|---|
| head | <head> 內要產生的標籤 |
| layout | 這頁套用的佈局元件 |
| loading | 是否套用預設 loading 效果，預設為 Progress Bar 效果。可自行控制 loading 效果觸發點、Progress Bar 效果參數，參考API - page - loading |
| transition | 這頁套用的跳頁轉場效果 |
| scrollToTop | 換頁是否跳到頁首 |
另外，當 Browser 請求某頁面，一個 請求(Requset) 進 Nuxt 經過以下流程
相信已經對 Vue.js 生命週期(Life Cycle) 很熟悉，例如 created、mounted，
Nuxt 執行流程中的各階段同 Vue.js 生命週期，提供掛鉤函式(Hook)供你定義，
，以下是對應的屬性名:
| 屬性名 | 用途描述 |
|---|---|
| middleware | 這頁執行哪些 middleware，後面會深入介紹 |
| validate | 進入頁面前的驗證規則。false 代表沒驗過，Nuxt 會導到錯誤頁面 |
| asyncData | 頁面元件渲染前執行，回傳 Promise 物件，會把 Promise callback 最終回傳值設為頁面 data |
| fetch | 頁面元件渲染前執行，和 asyncData 類似，也回傳 Promise 物件，但最終回傳值不做處理 |
開發者指定這頁的運作邏輯時，因而更具彈性，例如:
下一篇還沒決定寫 Nuxt 生命週期 還是 Page vs. Component
iThome鐵人賽
看影片追技術