型

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

interface AddRouteMiddlewareOptions {
  global?: boolean
}

パラメータ

name

• 型: string | RouteMiddleware

string または RouteMiddleware 型の関数のいずれかです。関数は次のルート to を最初の引数として、現在のルート from を2番目の引数として受け取ります。どちらもVueルートオブジェクトです。

ルートオブジェクトの利用可能なプロパティについて詳しく学びましょう。

middleware

• 型: RouteMiddleware

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

options

• 型: AddRouteMiddlewareOptions

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

例

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

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

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('Nuxtプラグインに追加された名前付きミドルウェア')
  })
})

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

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

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

• 名前なしで最初の引数として関数を直接渡します。これにより、自動的にグローバルミドルウェアとして扱われ、すべてのルート変更時に適用されます。

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware((to, from) => {
      console.log('すべてのルート変更時に実行される匿名のグローバルミドルウェア')
    })
  })
  

• オプションの3番目の引数 { global: true } を設定して、ルートミドルウェアがグローバルであるかどうかを示します。

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-middleware', (to, from) => {
        console.log('すべてのルート変更時に実行されるグローバルミドルウェア')
      },
      { global: true }
    )
  })