Nuxt.js では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます。
Function
または Async Function
validate({ params, query, store }) {
return true // params バリデーションを通過したとき
return false // Nuxt.js がルートをレンダリングするのを中止して、エラーページを表示させる
}
async validate({ params, query, store }) {
// await の処理
return true // params バリデーションを通過したとき
return false // Nuxt.js がルートをレンダリングするのを中止して、エラーページを表示させる
}
プロミスを返すこともできます:
validate({ params, query, store }) {
return new Promise((resolve) => setTimeout(() => resolve()))
}
Nuxt.js では動的なルーティングを行うコンポーネント内でバリデーションメソッドを定義できます(下記の例は pages/users/_id.vue
内です)
バリデーションメソッドが true
を返さないときは Nuxt.js は自動的に 404 エラーページをロードします。
export default {
validate ({ params }) {
// 数値でなければならない
return /^\d+$/.test(params.id)
}
}
また、例えば Vuex ストア のデータを使ってバリデーションすることもできます(Vuex ストアのデータは nuxtServerInit アクション を用いて事前に格納しておきます):
export default {
validate ({ params, store }) {
// `params.id` が存在している category の 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 でこのページを編集する