defineNuxtRouteMiddleware

ソース
defineNuxtRouteMiddleware ヘルパー関数を使用して、名前付きルーとミドルウェアを作成します。

ルーとミドルウェアは、Nuxt アプリケーションの app/middleware/ に保存されます (別に設定されていない限り)。

タイプ

署名
export function defineNuxtRouteMiddleware (middleware: RouteMiddleware): RouteMiddleware

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

パラメーター

middleware

  • 型: RouteMiddleware

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

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

例

エラーページの表示

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

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

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

リダイレクト

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

app/middleware/auth.ts
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 内で使用できるグローバルなヘルパー関数です。