Vueと共通

【Nuxt.js】Vue Router復習編:params, queryを使おう

前置き

前回の続きです!
基礎編の復習と思ってもらえれば⭕️


値を見てみよう!

consoleの値と
実際画面上でどうなるか
確認していきましょう🎈🧸

_idでどんな文字列がきても
良い状態にしておきます。

directory

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

) pages

URL

http://localhost:59037/hoge

解説

consoleを見ていきましょう👀
paramsが{id: "hoge"}
urlのpath部分がhogeのため
templateの参照も
$route.params.idで一致し
うまく表示されています🤗
これが$route.params.userにしてみると
一致せず何も表示されません。。。
queryが{}
urlに?がないためqueryは空


$router.pushの追加

動的ルートマッチング

) pages

URL:ボタンを押す前

http://localhost:59037/hoge

URL:ボタンを押した後

http://localhost:59037/hogehoge?user=private

queryをuser=privateにしているので
{{ $router.query.user }}と変更したことで
privateが表示されていますね🌟


pagination

ページネーションも
考え方はこれと同じです!
paramsは同じまま、
queryだけを変えていきます。
これにより同じページ内でソートを書け
1ページ目だけを表示、ということができます🔍
liの1を押せば1ページ目にいきます💡

http://localhost:3000/home?members=1

解説

基礎構文

${変数}

変数を使う時は${変数}にします。
テンプレートリテラルについては
ここが分かりやすいです!

JavaScript の テンプレートリテラル を極める!

userIdをpropsとして渡し
親でuserId=123とすれば
/user/123へ飛びます。

プログラムによるナビゲーション

コード

) components

queryをpropsとして渡します。
queryは?から始まるので?から始まり
その後ろに変数のqueryを入れます。
変数を使う時は${変数}にします。

注意

$router.pushの文頭に/を追加し
$router.push(/?${query}=1)にしてしまうと、
pages/index.vue内でメンバーの一覧部分をソートすることになります!
http://localhost:3000/?members=1

) pages

queryを親で指定して
members一覧部分の
1ページ目でソートすることができます🔍


理解度チェック

✅あまり実用的ではないですが
理解度チェックのためのクイズです👀

飛びたいURLから
下のコードに足りない部分を書き足しましょう✍️

飛びたいURL

http://localhost:3000/user/hoge

directory

components/
--| RouterPush.vue

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

) components

) pages

Let's try!

どっちのファイルに何を足すでしょう…

ticktack…

分かりましたか?

答え

) pages

解説

RouterPush.vueで
${変数}を使っているため
親で変数queryを行きたいURLに指定します🎈🧸
行きたいURLはuser/_id.vueで
_idはhogeとしているのでquery="user/hoge"
文字列をそのまま渡しているので
:queryにする必要はありません。
:query="変数"の場合は使用します🌟
これで復習もバッチリですね!!

-Vueと共通
-,

© 2020 aLiz Nuxt