🦚

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

2023/04/25に公開

はじめに

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側で半角スペースを+に置換する
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"

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

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

Discussion