【Vue.js】vue-routerで取得したqueryの+記号が半角スペースになってしまったときの対処法

はじめに

vue-routerで取得したqueryを引数として、API通信を行う際に+記号が半角スペースに変換されていたため、正しいパラメータとして送れていない問題が発生してました。そのときの対応方法を備忘として書き残しておきます。

なぜ起きたのか

まず、urlはこのようなものだとお考えください。
http://localhost:5173?q=fuga+hoge

こちらが、queryを取得した際に、下記のようになっていました。

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route?.query?.q) // "fuga hoge"

本来は、"fuga+hoge"としたいので困りました。

mozillaのパーセントエンコーディング内の記述を見ると、

コンテキストに応じて、文字 ' ' は '+'（application/x-www-form-urlencoded メッセージで使用するパーセントエンコーディングバージョンなど）または URL のような '%20' に変換されます。

との記載があります。どうやら、vue-routerでqueryを取得する際に+が半角スペースを表すものと判定されてしまったようです。

ご参考）
https://developer.mozilla.org/ja/docs/Glossary/Percent-encoding

対処法

対処法は大まかに2通り考えられます。

1. URLのqueryパラメータを提供側にエンコードしてもらう
2. vue側で半角スペースを+に置換する

筆者は、1の対応になるようにプロジェクト内で話を進めていくのがセオリーだと思います。
下記の対処法は大人の事情で2を選択するしかなかった場合のものです。

import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route?.query?.q) // "fuga hoge"

const q = String(route?.query?.q).replace(/ /g, '+')

console.log(route?.query?.q) // "fuga+hoge"

このような形で半角スペースを+記号に置換することで、正しいパラメータを送ることでできるようになりました。

最後まで記事をお読みいただきありがとうございました。