#はじめに
こんにちは!
今回は【Nuxt.js】動的ルーティングについてアウトプットしていきます!
パラメータを使って動的なルーティングを定義するにはコンポーネントのファイル名にアンダースコアのプレフィックスをつけます。
##パラメータとは
URLパラメータとは、サーバー側で動くプログラムに情報を送るために、URLの末尾に付け加える変数(文字列)のことを言います。
##動的なルーティングとは
動的なルーティング(ダイナミックルーティング)とは、ルータなどが経路情報を互いに交換しあい、自動的に生成・更新し続ける経路表(ルーティングテーブル)に基づいて経路選択を行なうこと。
#解説
localhost:3000/users/1
localhost:3000/users/2
localhost:3000/users/3
_id.vue
⏫アンダースコアのプレフィックスを付ける
URLパラメーターとして渡された値(1,2,3)といったid
を取り出すには、作成したファイルの中のテンプレート部分に、
<p>id: {{ this.$route.params.id }}</p>
といったようなthis.$route.params.id
というように記述します。
#まとめ
・動的なルーティングを行うには、ファイル名にアンダースコアのプレフィックスしたものを作成し、テンプレートにthis.$route.params.id
たるものを記述しなければならない。
・またパラメータ部分は数値でなくても構わない。
予期せぬエラー防止のためにパラメータ部分を指定する事も可。使用されるのはvalidate
メソッド。
<script>
validate({ params }){
}
</script>
この{}内に指定内容を記述してあげる。
#最後に
今回は動的ルーティングについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。
今後ともQiitaにてアウトプットしていきます!
最後までご愛読ありがとうございました!