NuxtでURLのパラメータを取得し、それをバリデートしてみます。
http://www.example.com/posts/1
http://www.example.com/posts/test
のようにアクセスした場合に数字の場合は表示、文字列の場合はエラーを返すようにします。
Nuxtプロジェクトに以下のファイルを追加して、下記のソースを記載します。
「pages/posts/sample.vue」
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 を返します。
