ルートミドルウェアは、Nuxt アプリケーションの middleware/ に保存されます（別の設定をしない限り）。

型

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

interface RouteMiddleware {
  (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>
}

パラメータ

middleware

• 型: RouteMiddleware

2つの Vue Router のルートロケーションオブジェクトをパラメータとして受け取る関数です。次のルート to を最初のパラメータとして、現在のルート from を2番目のパラメータとして受け取ります。

RouteLocationNormalized の利用可能なプロパティについては、Vue Router ドキュメント を参照してください。

例

エラーページの表示

ルートミドルウェアを使用してエラーをスローし、役立つエラーメッセージを表示することができます:

export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
  }
})

上記のルートミドルウェアは、ユーザーを ~/error.vue ファイルで定義されたカスタムエラーページにリダイレクトし、ミドルウェアから渡されたエラーメッセージとコードを公開します。

リダイレクション

ルートミドルウェア内で navigateTo ヘルパー関数と useState を組み合わせて使用し、ユーザーの認証ステータスに基づいて異なるルートにリダイレクトします:

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')

  if (!auth.value.isAuthenticated) {
    return navigateTo('/login')
  }

  if (to.path !== '/dashboard') {
    return navigateTo('/dashboard')
  }
})

navigateTo と abortNavigation は、defineNuxtRouteMiddleware 内で使用できるグローバルなヘルパー関数です。