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

前置き

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

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

値を見てみよう！

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

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

解説

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

$router.pushの追加

動的ルートマッチング

) pages

<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>

<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>

export default {

fetch ({ params, query }) {

console.log(params, query)

}

</script>

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へ飛びます。

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

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

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

コード

) components

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>

<li

@click="$router.push(`?${query}=1`)"

</span>

</li>

</div>

</template>

export default {

props: {

query: {

type: String,

required: true,

}

</script>

注意

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

) pages

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

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

<Pagination

query="members"

</div>

</template>

理解度チェック

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

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

飛びたいURL

http://localhost:3000/user/hoge

答え

) pages

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

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

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

<RouterPush

query="user/hoge"

</div>

</template>

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="変数"の場合は使用します🌟
これで復習もバッチリですね！！