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 を 2 番目の引数として受け取ります。どちらも Vue ルートオブジェクトです。

ルートオブジェクトの利用可能なプロパティの詳細をご覧ください。

middleware

  • 型: RouteMiddleware

2 番目の引数は RouteMiddleware 型の関数です。上記と同様に、to と from ルートオブジェクトを提供します。addRouteMiddleware() の最初の引数が既に関数として渡されている場合、これはオプションになります。

options

  • 型: AddRouteMiddlewareOptions

オプションの options 引数を使用すると、ルーターミドルウェアがグローバルであるかどうかを示す global の値を true に設定できます（デフォルトは false）。

例

名前付きルートミドルウェア

名前付きルートミドルウェアは、最初の引数として文字列を、2 番目の引数として関数を提供することによって定義されます。

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

プラグインで定義されている場合、app/middleware/ ディレクトリにある同じ名前の既存のミドルウェアを上書きします。

グローバルルートミドルウェア

グローバルルートミドルウェアは 2 つの方法で定義できます。

  • 名前なしで関数を最初の引数として直接渡します。これは自動的にグローバルミドルウェアとして扱われ、すべてのルート変更に適用されます。
    app/plugins/my-plugin.ts
    export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    console.log('anonymous global middleware that runs on every route change')
  })
})
  • ルートミドルウェアがグローバルであるかどうかを示すオプションの 3 番目の引数 { 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 },
  )
})