feat: allow encoded query keys

diff --git a/__tests__/url-encoding.spec.js b/__tests__/url-encoding.spec.js
index f97b767e413b33d6b569fe98ade82bfa0a7d3df4..a472082346b8dfb827cebb102263415090166ed3 100644 (file)
--- a/__tests__/url-encoding.spec.js
+++ b/__tests__/url-encoding.spec.js
@@ -101,6 +101,22 @@ describe('URL Encoding', () => {
       )
     })
 
+    it('decodes params keys in query', async () => {
+      const history = createHistory('/?%E2%82%AC=euro')
+      const router = new Router({ history, routes })
+      await router.doInitialNavigation()
+      expect(router.currentRoute).toEqual(
+        expect.objectContaining({
+          name: 'home',
+          fullPath: '/?' + encodeURIComponent('€') + '=euro',
+          query: {
+            '€': 'euro',
+          },
+          path: '/',
+        })
+      )
+    })
+
     it('allow unencoded params in query (IE Edge)', async () => {
       const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
       const history = createHistory('/?q=€%notvalid')

diff --git a/explorations/html5.html b/explorations/html5.html
index 8dbf5b9bdac97a2982f0e61b52bb1c0aa0fa37ec..18d096bc134780cc03307535039aeeea98fcf0cc 100644 (file)
--- a/explorations/html5.html
+++ b/explorations/html5.html
@@ -53,8 +53,9 @@
           >
         </li>
         <li>
-          <router-link :to="{ name: 'home', query: { currency: '€uro' }}"
-            >/currency=€uro (object)</router-link
+          <router-link
+            :to="{ name: 'home', query: { currency: '€uro', 'é': 'e' }}"
+            >/currency=€uro&é=e (object)</router-link
           >
         </li>
         <li>

diff --git a/src/history/utils.ts b/src/history/utils.ts
index cde856d764cc4782c9193b4bf51ddf4c4932aa1f..0e497c8dd0ffca423e1aec558c6281c7fc2ae0e5 100644 (file)
--- a/src/history/utils.ts
+++ b/src/history/utils.ts
@@ -60,12 +60,20 @@ export function parseQuery(search: string): HistoryQuery {
   const searchParams = (hasLeadingIM ? search.slice(1) : search).split('&')
   for (let i = 0; i < searchParams.length; ++i) {
     let [key, value] = searchParams[i].split('=')
+    try {
+      key = decodeURIComponent(key)
+    } catch (err) {
+      // TODO: handling only URIError?
+      console.warn(
+        `[vue-router] error decoding query key "${value}" while parsing query. Sticking to the original key.`
+      )
+    }
     try {
       value = decodeURIComponent(value)
     } catch (err) {
       // TODO: handling only URIError?
       console.warn(
-        `[vue-router] error decoding "${value}" while parsing query. Sticking to the original value.`
+        `[vue-router] error decoding query value "${value}" while parsing query. Sticking to the original value.`
       )
     }
     if (key in query) {
@@ -108,6 +116,17 @@ export function stringifyQuery(query: RawHistoryQuery): string {
       search += key
       continue
     }
+    let encodedKey: string = key
+    try {
+      encodedKey = encodeURIComponent(key)
+    } catch (err) {
+      // TODO: handling only URIError?
+      // TODO: refactor all encoded handling in a custom function
+
+      console.warn(
+        `[vue-router] invalid query parameter while stringifying query: "${key}": "${value}"`
+      )
+    }
 
     let values: string[] = Array.isArray(value) ? value : [value]
     try {
@@ -119,9 +138,9 @@ export function stringifyQuery(query: RawHistoryQuery): string {
         `[vue-router] invalid query parameter while stringifying query: "${key}": "${values}"`
       )
     }
-    search += `${key}=${values[0]}`
+    search += `${encodedKey}=${values[0]}`
     for (let i = 1; i < values.length; i++) {
-      search += `&${key}=${values[i]}`
+      search += `&${encodedKey}=${values[i]}`
     }
   }