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]単一の値を渡す

まずは基本の方法を確認します。特に変わったことはしていません。

index

<!-- webページ内にこんなボタンがあると想定 -->
<router-link
:to="{ path: '/test', query: {abc:'def'}}"
>
    <button>Testボタン！押すとtestページへ</button>
</router-link>

test

// vueインスタンスの設定の箇所を想定
computed:{
    abc(){
        return this.$route.query.abc;
    }
}

ブラウザのDevtoolsで確認した結果は……

abc:"def"

これが基本形ですね。

[2]クエリで空の文字列を渡してみる

次に少し変化球をしてみます。

index

<router-link
:to="{ path: '/test', query: {foo:''}}"
>
    <button>Testボタン！押すとtestページへ</button>
</router-link>

test

computed:{
    foo(){
        return this.$route.query.foo;
    }
}

ブラウザのDevtoolsで確認すると……

foo:""

無事からの文字列を受け取れました。これは正直、想定内ですね。

[3]クエリとして渡してないものを受け取る

今度はどうでしょう。nullにでもなるのかな？などと勝手に予想。

index

<router-link
:to="{ path: '/test', query: {}}"
>
    <button>Testボタン！押すとtestページへ</button>
</router-link>

test

computed:{
    nullQuery(){
        return this.$route.query.nullQuery;
    }
}

ブラウザのDevtoolsで確認した結果は……

nullQuery:""

空の文字列。こうくるか。

[4]クエリで配列を渡してみる

これは非常に気になりますね。そもそもクエリで複数の値を指定できるのか……

index

<router-link
:to="{ path: '/test', query: {arr: ['a','b']}}"
>
    <button>Testボタン！押すとtestページへ</button>
</router-link>

test

computed:{
    arr(){
        return this.$route.query.arr;
    }
}

これをdevtoolで確認すると……

arr:Array[2]
0:"a"
1:"b"

きちんと配列で受け取れています。因みにアドレスバーの表示は?arr="a"&arr="b"となっていました。

&で囲むことで複数のクエリを書き込めますが、同じkeyを指定すると、配列になる模様？です。

[5]クエリでオブジェクトを渡してみる

オブジェクトは、さすがに受け渡しが不安ですね。大丈夫かなあ？

index

<router-link
:to="{ path: '/test', query: {obob: { id:'c', value:'d' }}}"
>
    <button>Testボタン！押すとtestページへ</button>
</router-link>

test

computed:{
    obob(){
        return this.$route.query.obob;
    }
}

結果を見る前に、アドレスバーを見ると、obob=%5Bobject%20Object%5Dとなっていました。

デコードすると、[object Object]……え、本当にこれデータ送られているの？？？？

気になるdevtoolを見ると、一応、結果は正しく受け取れている模様。

obob:Object
id:"c"
value:"d"

でも心配すぎる。

終わりに

クエリで値を複数受け取る機会が多いかは分かりませんが、後々使う可能性もあると思うので、調べておいて良かったです。もしかしたら、配列で複数の値を受け渡しする場合もあるかもしれませんし。

正直、重い上に機能が多すぎて、VueCLIは好きじゃないんですけど、こうしてsandboxとして使える手軽さはメリットですね。

他にも色々弄ってみようと思います。