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

2020年11月27日 10:42

🎈 この記事はWP専用です

#前置き

とっても便利なparams, queryについてご紹介🌟
同じコンポーネントを見せたいけど、
カテゴリごとにURLだけを変えたい…
一覧ページからソートして表示させたい…
そんな時に便利です♪

params, queryについて
いくつかに分けて書きます✍️
router-linkが分かれば簡単です🌟
まだ不安な方のためにも
複数の書き方で記載しました🍒

まずはURLを見るのが
分かりやすいと思います🎈

localhost:3000/param/param?query=123

##パスパラメーター(param)

?より前の部分、省略できない

##クエリパラメーター(query)

?以降の部分、省略できる

###directoryとの関係①

localhost:3000/project123

projectごとにURLを変更
表示ページは同じでコンポーネントで表示分け

pages/
--| _id/
-----| index.vue

###directoryとの関係②

localhost:3000/events?today=true

events/index.vueの中で
today=trueでソートをかけて表示

pages/
--| events/
-----| index.vue

eventsは絶対省略できないですね。
pages/events/index.vueに
行けなくなってしまいます。

?today=trueは省略しても
ソートが外れるだけなので
ページはきちんと表示されます♪

🎈 続きはWPでご覧ください👀