Nuxt.jsで動的なidなどのroutingをバリデートする方法

2021年6月27日Vue.js

Nuxt.jsで動的なidなどのroutingをバリデートする方法を紹介します。

Nuxt.jsで動的なroutingをバリデートする方法

パラメーターをバリデートしたいとき
Nuxt.jsでは、動的なパラメーターのバリデートが簡単にできます。
たとえば、数字だけにしたい場合、
validate()というNuxt.jsでのみ使えるメソッドがあります。
validate()メソッドを使うことで、動的なURLに遷移する前にチェックすることができます。

上のようなディレクトリ構造とします。

pages/products/:id/index.vueに次のように記述します。

<script>
export default {
  validate (data) {
    console.log(data);
    // return data.params.id == 100 //100しかアクセスできなくなる
    // return data.params.id === 100 //これは型が違うようになるので、イコールは2つにする
    return /^\d+$/.test(data.params.id) //数値のみ
  }
}</script>

上のように、ナンバーのみにアクセスを許可したい場合、上のように設定します。

バリデートの指定

数値のみ許容したい

return /^\d+$/.test(data.params.id) //数値のみ

これは単純に数値のみに指定します。0も許容されます。

0以外の数値のみ許容したい

return /^[1-9][0-9]*$/.test(data.params.id) //0以外の数値のみ

こちらは0以外の数値のみを許容します。

数値で最大10桁まで許容したい

return /^[1-9][0-9]{0,9}$/.test(data.params.id) //最大10桁を許容した数値のみ

10桁の場合、最初に0を指定できないようにするため、[1-9]で1桁、、その後[0-9]{0,9}で最大9桁とすることで合わせて最大10桁まで許容できます。
最初に0を許容したい場合は、次のようにします。

return /^[0-9][0-9]{0,9}$/.test(data.params.id) //最大10桁を許容した数値のみ