addRouteMiddleware

型

addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {})

パラメータ

name

• 型: string | RouteMiddleware

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

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

middleware

• 型: RouteMiddleware

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

options

• 型: AddRouteMiddlewareOptions

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

例

匿名ルートミドルウェア

匿名ルートミドルウェアには名前がありません。最初の引数として関数を受け取るため、2番目のmiddleware引数は冗長になります。

export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    if (to.path === '/forbidden') {
      return false
    }
  })
})

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

名前付きルートミドルウェアは、最初の引数として文字列、2番目の引数として関数を受け取ります。

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

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

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

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

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