1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Next.js】動的ルーティングについて

Posted at

#はじめに
こんにちは!
今回は【Nuxt.js】動的ルーティングについてアウトプットしていきます!

パラメータを使って動的なルーティングを定義するにはコンポーネントのファイル名にアンダースコアのプレフィックスをつけます。

##パラメータとは
URLパラメータとは、サーバー側で動くプログラムに情報を送るために、URLの末尾に付け加える変数(文字列)のことを言います。

##動的なルーティングとは
動的なルーティング(ダイナミックルーティング)とは、ルータなどが経路情報を互いに交換しあい、自動的に生成・更新し続ける経路表(ルーティングテーブル)に基づいて経路選択を行なうこと。

#解説

URLの例

localhost:3000/users/1
localhost:3000/users/2
localhost:3000/users/3

ファイル名の例

_id.vue
⏫アンダースコアのプレフィックスを付ける

URLパラメーターとして渡された値(1,2,3)といったidを取り出すには、作成したファイルの中のテンプレート部分に、

_id.vue
    <p>id: {{ this.$route.params.id }}</p>

といったようなthis.$route.params.idというように記述します。

#まとめ
・動的なルーティングを行うには、ファイル名にアンダースコアのプレフィックスしたものを作成し、テンプレートにthis.$route.params.idたるものを記述しなければならない。
・またパラメータ部分は数値でなくても構わない。
予期せぬエラー防止のためにパラメータ部分を指定する事も可。使用されるのはvalidateメソッド。

id_vue
<script>
validate({ params }){

}
</script>

この{}内に指定内容を記述してあげる。

#最後に
今回は動的ルーティングについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます!

最後までご愛読ありがとうございました!

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?