Double Encoding of Query Parameters

[lacherogwu]

Reproduction

https://stackblitz.com/edit/vitejs-vite-qjvsopux

Steps to reproduce the bug

Description

When pushing a query using the vue-router, I've observed inconsistent encoding behavior: query parameters are either encoded twice or not at all.

Example

Consider the following code snippet:

const router = useRouter();

router.push({
  query: { notEncoded: '{name}', encoded: encodeURIComponent('{name}') },
});

The resulting URL appears as:

/?notEncoded={name}&encoded=%257Bname%257D

• The notEncoded parameter remains unchanged, as expected.
• The encoded parameter, however, is encoded twice.

For reference, the expected single encoding result is:

console.log(encodeURIComponent('{name}')); // %7Bname%7D

But in the URL, it appears as %257Bname%257D, indicating double encoding.

Reproduction

You can reproduce this issue using the following Stackblitz project.

Expected behavior

/?notEncoded={name}&encoded=%7Bname%7D

Actual behavior

/?notEncoded={name}&encoded=%257Bname%257D

Additional information

No response

[lacherogwu]

After reviewing the code, it appears that the behavior is intentional:

router/packages/router/src/encoding.ts

Lines 88 to 101 in 8e38733

	export function encodeQueryValue(text: string | number): string {
	return (
	commonEncode(text)
	// Encode the space as +, encode the + to differentiate it from the space
	.replace(PLUS_RE, '%2B')
	.replace(ENC_SPACE_RE, '+')
	.replace(HASH_RE, '%23')
	.replace(AMPERSAND_RE, '%26')
	.replace(ENC_BACKTICK_RE, '`')
	.replace(ENC_CURLY_OPEN_RE, '{')
	.replace(ENC_CURLY_CLOSE_RE, '}')
	.replace(ENC_CARET_RE, '^')
	)
	}

Issue Description:

I am encountering a problem with query string keys that are stringified objects. For example, consider the following URL:

http://localhost:5173/?filter={"orderNumber":"123"}

When sharing this link or opening it from a terminal, the link transforms to:

http://localhost:5173/?filter={%22orderNumber%22:%22123%22}

The double quotes " are encoded to %22, which is expected and acceptable, as the values remain unchanged. However, when this encoded link is opened through platforms like WhatsApp or a terminal, it further transforms into:

http://localhost:5173/?filter=%7B%2522orderNumber%2522:%2522123%2522%7D

This is an encoded version of the previously transformed URL, leading to a broken link.

Concern:

It seems that the encoded values are being replaced back to their unencoded forms, causing issues when sharing URLs. It would be beneficial to maintain the values in a URI-safe encoded format to prevent such problems.

btw all works great with qs package

import qs from 'qs'

createRouter({
  // other options...
  parseQuery: qs.parse,
  stringifyQuery: qs.stringify,
})