Plus signs in query parameter not decoded to space

[schuch]

Version

4.0.0-rc.4

Reproduction link

https://codesandbox.io/s/vue-router-4-reproduction-forked-yhc9e

Steps to reproduce

Having a route with a query parameter (e.g. http://example.org/test?param=a+b) the param value gets URI component decoded (decodeUriComponent). This does not decode '+' to ' ', as i would expect.

Accessing $route.query.param yields a+b, i would expect a b.

What is expected?

'+' chars in URL parameters should be decoded to ' '

What is actually happening?

'+' chars in URL parameters get not decoded

---

in vue-router 3 this was part of the parseQuery function: https://github.com/vuejs/vue-router/blob/f597959b14887cf0535aa895b6325a2f9348c5cf/src/util/query.js#L62

[posva]

This change is intended (https://next.router.vuejs.org/guide/migration/index.html#route-properties-encoding) but is open for discussion if there are reasons to adopt it for everybody instead of letting people handle it by themselves. By spec the + shouldn't be encoded in URLs but should be in form-encoded formats therefore it's not receiving special treatment to allow people to use the actual plus character in query params as a plus character. It has been a legacy thing for some time so I'm interested in knowing if this breaks any server

[schuch]

Thanks for the pointer, somehow i missed that documentation.

In our case no server got harmed. 🙏

We encountered it because Chrome still produces + encoded spaces in search queries passed from the omni box to our web page when it is registered as search engine in Chrome. May be it is time to file a chromium change request for this behavior.

[posva]

can you share an example of how to produce a URL like that? If services as used as google and other serach engines keep doing that, I guess we will have to add the exception

[schuch]

https://support.google.com/chrome/answer/95426 describes how to add a webpage as search engine to chrome.

After adding it, type the chosen keyword into the adress bar and press space or tab. Then enter a multi word search query and press enter. You will see how Chrome encodes the spaces in the query as +.

[posva]

Do you have a deployed example I can directly check? It doesn't matter if it's a real website in production

[schuch]

I will provide an example on github pages within this week, stay tuned.

[posva]

@schuch I meant that if you have an already deployed application where you reproduced the problem, that should be enough since we are testing Google's behavior 🙂

[posva]

This can be checked directly on YouTube.com and other websites when tabbing to directly do a search from the Omnibox.

I will make it match URLSearchParams:

s = new URLSearchParams("?a%20b=c%20d&e+f=g+h")
Array.from(s.entries())
// 0: (2) ["a b", "c d"]
// 1: (2) ["e f", "g h"]