NXUT liftcycle 生命週期

詳細說明

SERVER SIDE

• middleware 中間層執行

  在 渲染頁面 之前調用 操作技巧

  可以 設置或檢查條件甚至重定向頁面

  並按照 middleware 設定層級，依序執行，從 1~3

  1. Global：影響所有 routes。定義位置： nuxt.config.js 設的 middleware
  2. Layout ：影響群組 routes。定義位置： Layout Component 設的 middleware
  3. Page : 影響頁面 route。 定義位置： Page Component 設的 middleware

---

• validate 驗證

  在 渲染頁面 之前調用

  用於驗證動態路由參數，大多只有使用 true、false來做判斷依據!!

  export default {
    validate({ params, query, store }) {
      return params.id // true || false
    },
  }
  

  假設，沒有經過驗證的id，無法進入此頁面，你可以使用這個 hook

  如果 validate 為 false，則頁面將會無法進入且導引為 404。 通常需要先定義到 layout 上，404 or 500 的頁面。

• asyncData

  每次渲染頁面前，都會執行的 hook，asyncData 操作

  通常，由此操作 非同步 取得資料的 hook； 這邊 return 的操作，會覆蓋掉 data的資料。

• beforeCreate

  在進入 client 還會被執行一次

• create

  在進入 client 還會被執行一次

• fetch()

  每次渲染頁面前，都會執行的 hook，類似 asyncData nuxt 2.12 新增的功能
  • 可以使用 this
  • 可以在 methods 被操作，this.$fetch() or <button @click="$fetch"></button>

  當 fetch(context) 被傳入引入時，它就會變成 舊的 fetch(context) 功能，this 將會失效!!