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

🎈 この記事はWPへ移行しました
【Nuxt.js】Vue Router復習編：params, queryを使おう

# 前置き

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

firebaseに手間取っており
遅れております😭
申し訳ございません🙇‍♀️
しっかり公開できるよう頑張ります✊

# 値を見てみよう！

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

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

【ディレクトリ 】

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

【index.vue】

<template>
 <div class="page">
   <p>params: {{ $route.params.id }}</p>
   <p>query: {{ $route.query.id }}</p>
 </div>
</template>

<script>

export default {
 fetch ({ params, query }) {
   console.log(params, query)
 }
}
</script>

【URL】

http://localhost:59037/hoge

【表示】

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

✅$router.pushを追加してみます！
https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html

【index.vue】

<template>
 <div class="page">
   <p>params: {{ $route.params.id }}</p>
   <p>query: {{ $route.query.user }}</p>
   <button
     type="button"
     @click="$router.push({ path: 'hogehoge', query: { user: 'private' } })"
   >
     移動！
   </button>
 </div>
</template>

<script>

export default {
 fetch ({ params, query }) {
   console.log(params, query)
 }
}
</script>

【URL】
ボタンを押す前

http://localhost:59037/hoge

ボタンを押した後

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

【表示】

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

# pagination

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

【基礎構文】
変数を使う時は${変数}にします。
テンプレートリテラルについては
ここが分かりやすいです！https://qiita.com/kura07/items/c9fa858870ad56dfec12

userIdをpropsとして渡し
親でuserId=123とすれば
/user/123へ飛びます。
https://router.vuejs.org/ja/guide/essentials/navigation.html

router.push({ path: `/user/${userId}` }) // -> /user/123

【飛びたいURL】

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

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

<template>
 <div class="page">
   <ul class="list">
     <li
       @click="$router.push(`?${query}=1`)"
     >
       <span class="text">
         1
       </span>
     </li>
 </div>
</template>

<script>
export default {
 props: {
   query: {
     type: String,
     required: true,
   },
 },
}
</script>

【home.vue】

<template>
 <div class="page">
    <Pagination
      query="members"
    />
 </div>
</template>

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

💥$router.pushの文頭に/を追加し
　$router.push(`/?${query}=1`)
　にしてしまうと

【飛びたいURL】
pages/home.vue内で
メンバーの一覧部分をソート

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

【実際のURL】
pages/index.vue内で
メンバーの一覧部分をソート

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

となってしまいます！🤯

# 理解度チェック

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

飛びたいURLから
足りない部分を書き足しましょう✍️

【飛びたいURL】

http://localhost:3000/user/hoge

【ディレクトリ 】

components/
--| RouterPush.vue

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

【RouterPush.vue】

<template>
   <button
     type="button"
     @click="$router.push(`${query}`)"
   >
     home
   </button>
</template>​

【index.vue】

<template>
 <div class="page">
   <RouterPush
   />
 </div>
</template>

<script>
import RouterPush from '~/components/RouterPush.vue'

export default {
 components: {
   RouterPush
 },
}
</script>

…

…

分かりましたか？💡
書き足す部分はこちらです！

【index.vue】

<template>
 <div class="page">
   <RouterPush
     query="user/hoge"
   />
 </div>
</template>

<script>
import RouterPush from '~/components/RouterPush.vue'

export default {
 components: {
   RouterPush
 },
}
</script>

【解説】

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

次回はvuex関連！
firebaseもvuexと関わるので
一通りvuexやろうかなと…💡
公開予定日は3/27(金)です🌟

記事が公開したときにわかる様に、
note・Twitterフォローをお願いします😀

タイトル未設定

🎈 この記事はWPへ移行しました
【Nuxt.js】Vue Router復習編：params, queryを使おう