Vueと共通

【Nuxt.js】Vue Router基礎編:params, queryを使ってページ遷移

前置き

とっても便利な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

$router.push


使い方:name

router-link

$router.push

さあ、ここまでは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

動的ルーティング

user.idごとにページを変えたい(_id.vue)
その場合はuser.idを
fetchでstoreから取ってきたりします!

<router-link
 :to="{ path: /post/${user.id}}"
>
 home
</router-link>

ルーティング

$router.push

name + params

飛びたいURL

localhost:3000/post/123

directory

pages
--| post/
-----| _id.vue

再びvue検証を見てみましょう👀

router-link
$router.push

✍️書き方パターン
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
$router.push

nama + query

飛びたいURL

localhost:3000/post?userId=123

directory

pages
--| post/
-----| index.vue

router-link
$router.push

まとめ

すごく簡単にまとめると
この2点が分かれば基礎は⭕️です!

nameとpathがディレクトリ のどこにあたるか
params, queryはURLのどこにあたるか

-Vueと共通
-,

© 2024 aLiz Nuxt