addRouteMiddleware

類型

function addRouteMiddleware (name: string, middleware: RouteMiddleware, options?: AddRouteMiddlewareOptions): void
function addRouteMiddleware (middleware: RouteMiddleware): void

interface AddRouteMiddlewareOptions {
  global?: boolean
}

參數

name

• 類型： string | RouteMiddleware

可以是字串或 RouteMiddleware 類型的函式。函式將下一個路由 to 作為第一個引數，將目前路由 from 作為第二個引數，兩者都是 Vue 路由物件。

深入瞭解 路由物件 的可用屬性。

middleware

• 類型： RouteMiddleware

第二個引數是 RouteMiddleware 類型的函式。與上面相同，它提供 to 和 from 路由物件。如果 addRouteMiddleware() 中的第一個引數已作為函式傳遞，則它會變成可選。

options

• 類型： AddRouteMiddlewareOptions

可選的 options 引數可讓您將 global 的值設定為 true，以指示路由中介軟體是否為全域（預設設定為 false）。

範例

具名路由中介軟體

具名路由中介軟體是透過提供字串作為第一個引數和函式作為第二個引數來定義的

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('named middleware added in Nuxt plugin')
  })
})

當在外掛程式中定義時，它會覆寫位於 middleware/ 目錄中具有相同名稱的任何現有中介軟體。

全域路由中介軟體

全域路由中介軟體可以透過兩種方式定義

• 直接傳遞函式作為第一個引數，無需名稱。它將自動被視為全域中介軟體，並應用於每次路由變更。
  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware((to, from) => {
      console.log('anonymous global middleware that runs on every route change')
    })
  })
  

• 設定可選的第三個引數 { global: true }，以指示路由中介軟體是否為全域。
  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-middleware', (to, from) => {
        console.log('global middleware that runs on every route change')
      },
      { global: true }
    )
  })