Nuxt 3 Release Candidate がリリースされました! v3.nuxtjs.org で詳細について見れます。

翻訳されたページ このページのコンテンツは古い可能性があります。

validate メソッド

Nuxt では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます。


  • 型: Function または Async Function

validate は新しいルートに移動する前に毎回呼び出されます。サーバーサイドでは(Nuxt アプリケーションへの最初のリクエストで)1 度、クライアントサイドでは別のルートに遷移する際に呼び出されます。このメソッドは context オブジェクトを引数として受け取ります。

validate({ params, query, store }) {
  return true // params が有効な場合
  return false // Nuxt にルートをレンダリングさせるのを止め、エラーページを表示させます
}
async validate({ params, query, store }) {
  // 非同期操作
  return true // params が有効な場合
  return false // Nuxt にルートをレンダリングさせるのを止め、エラーページを表示させます
}

プロミスを返すこともできます:

validate({ params, query, store }) {
  return new Promise((resolve) => setTimeout(() => resolve()))
}

Nuxt では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます(以下の例では pages/users/_id.vue です)。

バリデーションメソッドが true を返さない場合 Nuxt は自動的に 404 エラーページをロードします。

export default {
  validate({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

例えばストア 内の一部のデータ(アクションの前に nuxtServerInit で格納されます)を確認することもできます:

export default {
  validate({ params, store }) {
    // `params.id` が存在しているカテゴリかどうかを確認します
    return store.state.categories.some(category => category.id === params.id)
  }
}

バリデーション関数を実行中に想定されるエラーや想定外のエラーを投げることもできます:

export default {
  async validate({ params, store }) {
    // カスタムメッセージと共に 500 internal server error を投げます
    throw new Error('Under Construction!')
  }
}
このページをGitHubで編集する 更新日 Sat, Sep 24, 2022