[Nuxt] パラメータの取得とバリデート
NuxtでURLのパラメータを取得し、それをバリデートしてみます。
http://www.example.com/posts/1
http://www.example.com/posts/test
のようにアクセスした場合に数字の場合は表示、文字列の場合はエラーを返すようにします。
Nuxtプロジェクトに以下のファイルを追加して、下記のソースを記載します。
「pages/posts/sample.vue」
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <div> <h2>{{ message }}</h2> <p>id: {{ this.$route.params.id }}</p> </div> </template> <script> export default { data: function () { return { message: 'パラメータの取得とバリデート', }; }, validate({ params }) { return /^\d+$/.test(params.id) }, }; </script> |
http://www.example.com/posts/sample/1
でアクセスするとページに idが表示されます。
http://www.example.com/posts/sample/test
でアクセスすると「This page could not be found」が表示されます。（エラーになります）
validateの「/^\d+$/」は正規表現という記載方法で、
^は先頭
\dは数字
+は直前の正規表現の1回以上の繰り返し
$は行末（文字列の終わり）
を意味しています。
他のバリデーションパターン（正規表現）を知りたい場合はgoogleで「正規表現」で検索するとたくさん情報が出てきます。
正規表現の後の.test()は
正規表現.test(テストするデータ)という書式で利用できます。
.test()は与えられたデータが正規表現に一致するかをチェックする関数です。
マッチすれば true マッチしない場合は false を返します。
関連記事
- [Nuxt] axiosでAPIのデータを取得し表示する方法
- [Vue.js] コンポーネントを使ってパーツを再利用
- [CakePHP] 独自のSQL文でプリペアドステートメントを使う方法
- [Vue.js] 1ページで複数のVueインスタンスを利用する方法
- [Nuxt] ルートの設定・自動設定されるルーティングを確認する方法
