前幾天的文章說明了基本的路由和頁面搭配作法，在 vue-router 中還有生命週期的運用（可以參考 vue-router 官方文件 或是 Kuro大大 的 重新認識 Vue.js - 路由守衛）在頁面跳轉前、後做一些額外的操作。

Nuxt3 中我們不太會直接操作 vue-router，都是使用封裝好的方法、元件，操作 vue-router 生命週期的方式就是在名為 「middleware」的資料夾底下來撰寫程式。

官方文件中有說明，此處的 middleware 和後端的 middleware 是完全不同的。

middleware 的種類

middleware 使用方式共有三種：

• 匿名：在頁面（page）中直接撰寫並使用。
• 具名：放在 middleware 資料夾中，並且在頁面中非同步載入。（使用時檔案名稱會從駝峰式自動轉為烤肉串式）
• 全域：放在 middleware 資料夾中，檔名後加上.global（例如：route.global.ts、auth.global.js），所有路由都會生效。

撰寫方式

Nuxt3 中沒有 vue-router 的 next 參數，只需要透過 navigateTo 來變更路由目標、abortNavigation 中斷路由、或是維持原路由。以下是官方的撰寫範例：

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
  }
  return navigateTo('/')
})

• to：要前往的路由
• from：原本的路由
• navigateTo(to, options: { replace: boolean, redirectCode: number, external: boolean )：使用方法直接決定路由導向，第一個參數為路徑，後面的參數可以設定跳轉的代碼或是直接取代(replace)。
• abortNavigation (err?: string | Error)：中斷路由，參數內可以帶上錯誤訊息。

動態載入

middleware 還有其他靈活的使用方式，但是操作的頻率較低（權限驗證之類的），可以在官方的線上 PlayGround嘗試看看。