iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
1

Nuxt 頁面元件跟 Vue File 哪裡不同?

Nuxt Routing 自動映射介紹過,/pages 的 Vue File 對應各個頁面。

雖然寫法一樣,為了讓頁面定義的寫法吻合 Vue File 慣例,除了先前介紹過 headlayout

Nuxt 頁面元件擴充了以下屬性:

屬性名 用途描述
head <head> 內要產生的標籤
layout 這頁套用的佈局元件
loading 是否套用預設 loading 效果,預設為 Progress Bar 效果。可自行控制 loading 效果觸發點、Progress Bar 效果參數,參考API - page - loading
transition 這頁套用的跳頁轉場效果
scrollToTop 換頁是否跳到頁首

另外,當 Browser 請求某頁面,一個 請求(Requset) 進 Nuxt 經過以下流程

相信已經對 Vue.js 生命週期(Life Cycle) 很熟悉,例如 createdmounted
Nuxt 執行流程中的各階段同 Vue.js 生命週期,提供掛鉤函式(Hook)供你定義,
,以下是對應的屬性名:

屬性名 用途描述
middleware 這頁執行哪些 middleware,後面會深入介紹
validate 進入頁面前的驗證規則。false 代表沒驗過,Nuxt 會導到錯誤頁面
asyncData 頁面元件渲染前執行,回傳 Promise 物件,會把 Promise callback 最終回傳值設為頁面 data
fetch 頁面元件渲染前執行,和 asyncData 類似,也回傳 Promise 物件,但最終回傳值不做處理

開發者指定這頁的運作邏輯時,因而更具彈性,例如:

  • middleware 能指定這頁採用哪種權限驗證
  • validate 能指定這頁得具備哪些資訊才看得到
  • asyncData 和 fetch 能設置頁面狀態(data & store),收納 API 呼叫邏輯

下一篇還沒決定寫 Nuxt 生命週期 還是 Page vs. Component


上一篇
08. Nuxt 客製《甜點電商》SEO 基本資訊
下一篇
10. Nuxt 頁面元件簡化過程
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言