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