addRouteMiddleware

原始檔
addRouteMiddleware() 是一個輔助函式，用於在您的應用程式中動態新增中介軟體。
路由中介軟體是儲存在 Nuxt 應用程式的 app/middleware/ 目錄中的導航守衛（除非另有設定）。

型別

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）。

示例

命名路由中介軟體

命名路由中介軟體透過將字串作為第一個引數，函式作為第二個引數來定義

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

當在外掛中定義時，它會覆蓋 app/middleware/ 目錄中任何同名現有中介軟體。

全域性路由中介軟體

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

  • 直接將函式作為第一個引數傳入，不帶名稱。它將自動被視為全域性中介軟體，並應用於每次路由更改。
    app/plugins/my-plugin.ts
    export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    console.log('anonymous global middleware that runs on every route change')
  })
})
  • 設定一個可選的第三個引數 { global: true } 以指示路由中介軟體是否為全域性的。
    app/plugins/my-plugin.ts
    export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-middleware', (to, from) => {
    console.log('global middleware that runs on every route change')
  },
  { global: true },
  )
})