defineNuxtRouteMiddleware

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

型

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

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

パラメータ

middleware

• 型：RouteMiddleware

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

RouteLocationNormalizedで使用可能なプロパティの詳細については、Vue Routerドキュメントをご覧ください。

例

エラーページの表示

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

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

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

リダイレクト

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

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内で使用できます。