VueRouterで、単一ではなく、複数の値をqueryで受け取れるか、初心者なりに調べてみました。
はじめに
最初に蛇足を。大学経由で入学時に購入したLet's noteを、この前SSDに換え、メモリも増設しました。
すごい快適！今までのストレスが嘘みたい！！！これでコーディングが捗る！！！！
と思いきや、働き始めて思ったよりも時間を確保できず、疲労もあり思うように進まなくて正直困ってます。
……それはさておき、久しぶりにVueRouterの部分をいじる中で、ふと疑問が生じました。
クエリでは、複数の値をどうやって受け取るの？
keyとvalueを1:1で受け取るのは何度もしていたものの、key:value=1:多の場合をよく分かってませんでした。
ということで。疑問を持ったらすぐ試すのみ。自分で色々弄ってみることにしました。
実験準備
実験概要
さて、どう実験したか、まず記します。
ます、簡単なアプリの雛形をVueCLIで作りました。
次に、雛形アプリ内で、メインページ(/)にrouter-link付きのbuttonを用意し、クリックしたらテストページ(/test)へ飛ぶようにしました。
そして今回は、router-linkのtoに書き込む内容を色々変えて、その結果を確かめることにします。
なお、実験の細かい構成などは省略します。
使用するもの
主に以下の2つを用います。
- VueCLI
- VueRouterもこれに含まれます
- 細かい構成などは今回省略します
- VueDevTool
- Vueの動作を確認できるFireFoxやChromeの拡張機能
- 今回はこのツールで、どのような値が渡されたのか確認します
実験開始
toに書き込む内容を、5つ考えてみました。1つずつ、その内容と、結果を記します。
[1]単一の値を渡す
まずは基本の方法を確認します。特に変わったことはしていません。
<!-- webページ内にこんなボタンがあると想定 -->
<router-link
:to="{ path: '/test', query: {abc:'def'}}"
>
<button>Testボタン！押すとtestページへ</button>
</router-link>
// vueインスタンスの設定の箇所を想定
computed:{
abc(){
return this.$route.query.abc;
}
}
ブラウザのDevtoolsで確認した結果は……
abc:"def"
これが基本形ですね。
[2]クエリで空の文字列を渡してみる
次に少し変化球をしてみます。
<router-link
:to="{ path: '/test', query: {foo:''}}"
>
<button>Testボタン！押すとtestページへ</button>
</router-link>
computed:{
foo(){
return this.$route.query.foo;
}
}
ブラウザのDevtoolsで確認すると……
foo:""
無事からの文字列を受け取れました。これは正直、想定内ですね。
[3]クエリとして渡してないものを受け取る
今度はどうでしょう。nullにでもなるのかな？などと勝手に予想。
<router-link
:to="{ path: '/test', query: {}}"
>
<button>Testボタン！押すとtestページへ</button>
</router-link>
computed:{
nullQuery(){
return this.$route.query.nullQuery;
}
}
ブラウザのDevtoolsで確認した結果は……
nullQuery:""
空の文字列。こうくるか。
[4]クエリで配列を渡してみる
これは非常に気になりますね。そもそもクエリで複数の値を指定できるのか……
<router-link
:to="{ path: '/test', query: {arr: ['a','b']}}"
>
<button>Testボタン！押すとtestページへ</button>
</router-link>
computed:{
arr(){
return this.$route.query.arr;
}
}
これをdevtoolで確認すると……
arr:Array[2]
0:"a"
1:"b"
きちんと配列で受け取れています。因みにアドレスバーの表示は?arr="a"&arr="b"となっていました。
&で囲むことで複数のクエリを書き込めますが、同じkeyを指定すると、配列になる模様？です。
[5]クエリでオブジェクトを渡してみる
オブジェクトは、さすがに受け渡しが不安ですね。大丈夫かなあ？
<router-link
:to="{ path: '/test', query: {obob: { id:'c', value:'d' }}}"
>
<button>Testボタン！押すとtestページへ</button>
</router-link>
computed:{
obob(){
return this.$route.query.obob;
}
}
結果を見る前に、アドレスバーを見ると、obob=%5Bobject%20Object%5Dとなっていました。
デコードすると、[object Object]……え、本当にこれデータ送られているの？？？？
気になるdevtoolを見ると、一応、結果は正しく受け取れている模様。
obob:Object
id:"c"
value:"d"
でも心配すぎる。
終わりに
クエリで値を複数受け取る機会が多いかは分かりませんが、後々使う可能性もあると思うので、調べておいて良かったです。もしかしたら、配列で複数の値を受け渡しする場合もあるかもしれませんし。
正直、重い上に機能が多すぎて、VueCLIは好きじゃないんですけど、こうしてsandboxとして使える手軽さはメリットですね。
他にも色々弄ってみようと思います。