前置き
とっても便利なparams, queryについてご紹介🌟
同じコンポーネントを見せたいけど、
カテゴリごとにURLだけを変えたい…
一覧ページからソートして表示させたい…
そんな時に便利です♪
params, queryについて
いくつかに分けて書きます✍️
router-linkが分かれば簡単です🌟
まだ不安な方のためにも
複数の書き方で記載しました🍒
params, queryの違い
まずはURLを見るのが
分かりやすいと思います🎈
URL
localhost:3000/param/param?query=123
パスパラメーター(param)
?より前の部分、省略できない
クエリパラメーター(query)
?以降の部分、省略できる
directoryとの関係①
URL
localhost:3000/project123
projectごとにURLを変更
表示ページは同じでコンポーネントで表示分け
directory
pages/
--| _id/
-----| index.vue
directoryとの関係②
URL
localhost:3000/events?today=true
events/index.vueの中で
today=trueでソートをかけて表示
directory
pages/
--| events/
-----| index.vue
eventsは絶対省略できないですね。
pages/events/index.vueに
行けなくなってしまいます。
?today=trueは省略しても
ソートが外れるだけなので
ページはきちんと表示されます♪
メリット
🔍イベントサイトで一覧を見たい
URL
https://events
その中でも1ページ目だけ見たい！
URL
https://events?page=1
ということが、
できちゃいます！！！
以前paginationで使ったことがあるので
こちらも確認してみてください🍒
クエリパラメーターとは
サーバーに情報を送るための文字列のこと✍️
urlの最後に?から始まる文字列をつけて
サーバーにデータが送信されます！
複数のデータを送る時は?で繋げます。
URL
localhost:3000/post?id=123
id=123というデータを
サーバーに送信していますね！
ではディレクトリ や
表示はどうなるかというと…
directory
pages
--| post/
-----| index.vue
サーバーにデータを送りたいだけなので
表示するページ自体はpages/post/index.vue
そこにクエリパラメーターを入れて
パラメーターを参照することで
自分のIDや登録名が見れたり👀
フィルターをかけてソートできたり🔍✨
するわけです！！！
router-linkを理解する
paramsやqueryを使う前に🌟
pathやnameを使った
router-link(nuxt-link)を理解しましょう！
飛びたいURL
localhost:3000/home
directory
pages
--| home/
-----| index.vue
ではvue検証で
nameとpathを見てみましょう👀
nameはhome
pathは/home
ということが分かりますね！
使い方：path
router-link
|
1 2 3 4 5 |
<router-link :to="{path: 'home'}" > home </router-link> |
$router.push
|
1 2 3 4 5 6 |
<button type="button" @click="$router.push('home')" > home </button> |
使い方：name
router-link
|
1 2 3 4 5 |
<router-link :to="{name: 'home'}" > home </router-link> |
$router.push
|
1 2 3 4 5 6 |
<button type="button" @click="$router.push({ name: 'home'})" > home </button> |
さあ、ここまではOKですか？🎈🧸
router-linkにparamsとqueryを追加
ではname, pathに
paramsとqueryを追加してみましょう！
基本的な書き方は公式のこちら。
params
path + params
pathはURLを書けば良いだけ🌟
飛びたいURL
localhost:3000/post/profile
directory
pages/
--| post/
-----| profile.vue
router-link
|
1 2 3 4 5 |
<router-link :to="{ path: '/post/profile'}" > home </router-link> |
動的ルーティング
user.idごとにページを変えたい(_id.vue)
その場合はuser.idを
fetchでstoreから取ってきたりします！
<router-link
:to="{ path: /post/${user.id}}"
>
home
</router-link>
$router.push
|
1 2 3 4 5 6 |
<button type="button" @click="$router.push({ path: 'post/profile'})" > home </button> |
name + params
飛びたいURL
localhost:3000/post/123
directory
pages
--| post/
-----| _id.vue
再びvue検証を見てみましょう👀
router-link
|
1 2 3 4 5 |
<router-link :to="{ name: 'post-id', params: {id: 123} }" > home </router-link> |
$router.push
|
1 2 3 4 5 6 |
<button type="button" @click="$router.push({ name: 'post-id', params: {id: 123} })" > home </button> |
✍️書き方パターン
pathはurlをそのまま書く
nameは追加でparams指定
✍️実際の書き方
name
URLの/を-にする
_id.vueはidにする
path
{ path: 'hoge/hoge' }
または
{ path: hoge/${変数}}
query
path + query
飛びたいURL
localhost:3000/post?id=123
directory
pages/
--| post/
-----| index.vue
router-link
|
1 2 3 4 5 |
<router-link :to="{ path: '/post?id=123'}" > home </router-link> |
$router.push
|
1 2 3 4 5 6 |
<button type="button" @click="$router.push({ path: 'post?id=123'})" > home </button> |
nama + query
飛びたいURL
localhost:3000/post?userId=123
directory
pages
--| post/
-----| index.vue
router-link
|
1 2 3 4 5 |
<router-link :to="{ name: 'post', query: {userId: 123} }" > home </router-link> |
$router.push
|
1 2 3 4 5 6 |
<button type="button" @click="$router.push({ name: 'post', query: {userId: 123} })" > home </button> |
まとめ
すごく簡単にまとめると
この2点が分かれば基礎は⭕️です！
nameとpathがディレクトリ のどこにあたるか
params, queryはURLのどこにあたるか