【Nuxt.js】動的ルーティング

はじめに

先日初めて動的なルーティングという言葉を耳にし、扱う機会がありましたので自身の備忘録としてまとめておきたいと思います。
今回の記事の主な内容としましては、動的なルーティングファイルの作成方法と、扱い方について簡単にまとめたものとなっております。

動的なルーティングとは

pagesディレクトリの直下に作成されるファイルに関しては、そのファイル名で自動的にルーティングに生成されます。
一覧ページには、一般的にindex.vueが使用されますが、この詳細ページを作成したい場合には、URLに個別のIDや名前を入れる必要があります。このように、個別にURLが変わるもののことを動的ルーティングと表現します。
例） https://(アプリ名)/users/1

動的ルーティングの導入方法

ファイル構成は以下のようになります。
動的ルーティングを作成したい場合は、_(取得するパラメータ名).vueのファイル名で作成ができます。
今回の例ですと、userのIDで識別したいので、_id.vueとしています。

pages
├ users
│　├ index.vue (一覧ページ)
│　└ _id.vue   (詳細ページ)
└ index.vue

パラメータの渡し方

• this.$route.params.（取得するパラメータ名）
  ルートオブジェクトのparamsを参照して、パラメータを取得しています。
  idの値を取得後に、その値を定数idに格納して、HTTPリクエストを送信しています。

users/_id.vue

const id = this.$route.params.id
  this.$axios.get(`users/${id}`)

終わり

今回は以上になります。
まだまだ学習中の身ですが、同じ様な立場の方に少しでも参考になればと思っています。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。