fix: normalize routes and decode resolved query

packages/config/src/options.js

@@ -6,7 +6,10 @@ import pick from 'lodash/pick'
 import uniq from 'lodash/uniq'
 import consola from 'consola'
 import destr from 'destr'
-import { TARGETS, MODES, guardDir, isNonEmptyString, isPureObject, isUrl, getMainModule, urlJoin, getPKG } from '@nuxt/utils'
+import {
+  TARGETS, MODES, guardDir, isNonEmptyString,
+  isPureObject, isUrl, getMainModule, urlJoin, getPKG, safeEncode
+} from '@nuxt/utils'
 import { defaultNuxtConfigFile, getDefaultNuxtConfig } from './config'
 
 export function getNuxtConfig (_options) {
@@ -126,7 +129,7 @@ export function getNuxtConfig (_options) {
   if (!/\/$/.test(options.router.base)) {
     options.router.base += '/'
   }
-  options.router.base = encodeURI(decodeURI(options.router.base))
+  options.router.base = safeEncode(options.router.base)
 
   // Legacy support for export
   if (options.export) {

packages/server/src/server.js

@@ -162,12 +162,16 @@ export default class Server {
     }))
 
     // DX: redirect if router.base in development
-    if (this.options.dev && this.nuxt.options.router.base !== '/') {
+    const routerBase = this.nuxt.options.router.base
+    if (this.options.dev && routerBase !== '/') {
       this.useMiddleware({
         prefix: false,
-        handler: (req, res) => {
-          const to = urlJoin(this.nuxt.options.router.base, req.url)
-          consola.info(`[Development] Redirecting from \`${decodeURI(req.url)}\` to \`${decodeURI(to)}\` (router.base specified).`)
+        handler: (req, res, next) => {
+          if (decodeURI(req.url).startsWith(decodeURI(routerBase))) {
+            return next()
+          }
+          const to = urlJoin(routerBase, req.url)
+          consola.info(`[Development] Redirecting from \`${decodeURI(req.url)}\` to \`${decodeURI(to)}\` (router.base specified)`)
           res.writeHead(302, {
             Location: to
           })

packages/utils/src/route.js

@@ -1,7 +1,6 @@
 import path from 'path'
 import get from 'lodash/get'
 import consola from 'consola'
-
 import { r } from './resolve'
 
 const routeChildren = function (route) {
@@ -202,7 +201,7 @@ export const createRoutes = function createRoutes ({
         route.path += i > 0 ? '' : '/'
       } else {
         const isDynamic = key.startsWith('_')
-        route.path += '/' + getRoutePathExtension(isDynamic ? key : encodeURIComponent(decodeURIComponent(key)))
+        route.path += '/' + getRoutePathExtension(isDynamic ? key : safeEncode(key))
 
         if (isDynamic && key.length > 1) {
           route.path += '?'
@@ -280,3 +279,11 @@ export const promisifyRoute = function promisifyRoute (fn, ...args) {
   }
   return promise
 }
+
+export function safeEncodeComponent (str) {
+  return /%[0-9a-fA-F]{2}/.test(str) ? str : encodeURI(str)
+}
+
+export function safeEncode (str) {
+  return str.split('/').map(safeEncodeComponent).join('/')
+}

packages/vue-app/template/router.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import { interopDefault } from './utils'<%= isTest ? '// eslint-disable-line no-unused-vars' : '' %>
+import { interopDefault, safeEncode } from './utils'<%= isTest ? '// eslint-disable-line no-unused-vars' : '' %>
 import scrollBehavior from './router.scrollBehavior.js'
 
 <% function recursiveRoutes(routes, tab, components, indentCount) {
@@ -105,16 +105,27 @@ export const routerOptions = {
   fallback: <%= router.fallback %>
 }
 
+function decodeObj(obj) {
+  for (const key in obj) {
+    if (typeof obj[key] === 'string') {
+      obj[key] = decodeURIComponent(obj[key])
+    }
+  }
+}
+
 export function createRouter () {
   const router = new Router(routerOptions)
-  const resolve = router.resolve.bind(router)
 
-  // encodeURI(decodeURI()) ~> support both encoded and non-encoded urls
+  const resolve = router.resolve.bind(router)
   router.resolve = (to, current, append) => {
     if (typeof to === 'string') {
-      to = encodeURI(decodeURI(to))
+      to = safeEncode(to)
+    }
+    const r = resolve(to, current, append)
+    if (r && r.resolved && r.resolved.query) {
+      decodeObj(r.resolved.query)
     }
-    return resolve(to, current, append)
+    return r
   }
 
   return router

packages/vue-app/template/server.js

@@ -7,7 +7,8 @@ import {
   <% if (features.middleware) { %>middlewareSeries,<% } %>
   <% if (features.middleware && features.layouts) { %>sanitizeComponent,<% } %>
   getMatchedComponents,
-  promisify
+  promisify,
+  safeEncode
 } from './utils.js'
 <% if (features.fetch) { %>import fetchMixin from './mixins/fetch.server'<% } %>
 import { createApp<% if (features.layouts) { %>, NuxtError<% } %> } from './index.js'
@@ -50,12 +51,12 @@ const createNext = ssrContext => (opts) => {
     opts.path = urlJoin(routerBase, opts.path)
   }
   // Avoid loop redirect
-  if (encodeURI(decodeURI(opts.path)) === ssrContext.url) {
+  if (decodeURI(opts.path) === decodeURI(ssrContext.url)) {
     ssrContext.redirected = false
     return
   }
   ssrContext.res.writeHead(opts.status, {
-    Location: opts.path
+    Location: safeEncode(opts.path)
   })
   ssrContext.res.end()
 }

packages/vue-app/template/utils.js

@@ -309,7 +309,7 @@ export function getLocation (base, mode) {
 
   const fullPath = (path || '/') + window.location.search + window.location.hash
 
-  return encodeURI(fullPath)
+  return safeEncode(fullPath)
 }
 
 // Imported from path-to-regexp
@@ -692,3 +692,11 @@ export function setScrollRestoration (newVal) {
     window.history.scrollRestoration = newVal;
   } catch(e) {}
 }
+
+export function safeEncodeComponent(str) {
+  return /%[0-9a-fA-F]{2}/.test(str) ? str : encodeURI(str)
+}
+
+export function safeEncode(str) {
+  return str.split('/').map(safeEncodeComponent).join('/')
+}

test/dev/encoding.test.js

@@ -21,6 +21,18 @@ describe('encoding', () => {
     expect(response).toContain('Unicode base works!')
   })
 
+  test('/ö/dynamic?q=food,coffee (encodeURIComponent)', async () => {
+    const { body: response } = await rp(url('/ö/dynamic?q=food%252Ccoffee'))
+
+    expect(response).toContain('food,coffee')
+  })
+
+  test('/ö/@about', async () => {
+    const { body: response } = await rp(url('/ö/@about'))
+
+    expect(response).toContain('About')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()

test/fixtures/encoding/layouts/default.vue

@@ -1,24 +1,41 @@
 <template>
   <div>
     <div>
-      <NLink to="/тест">
-        /тест
-      </NLink>
-      <NLink :to="encodeURI('/тест')">
-        /тест (encoded)
-      </NLink>
-      <br>
-      <NLink to="/тест?spa">
-        /тест (SPA)
-      </NLink>
-      <NLink :to="encodeURI('/тест?spa')">
-        /тест (SPA encoded)
-      </NLink>
+      <ul>
+        <li v-for="link in links" :key="link">
+          <NLink :to="link">
+            {{ link }}
+          </NLink>
+          <NLink :to="link.includes('?') ? link.replace('?', '?spa&') : (link + '?spa')">
+            (spa)
+          </NLink>
+          <a :href="encodeURI('/ö') + link">(direct)</a>
+        </li>
+      </ul>
     </div>
     <Nuxt />
   </div>
 </template>
 
+<script>
+export default {
+  computed: {
+    links () {
+      return [
+        '/redirect',
+        '/@about',
+        '/тест',
+        encodeURI('/тест'),
+        '/dynamic/سلام چطوری?q=cofee,food,دسر',
+        encodeURI('/dynamic/سلام چطوری?q=cofee,food,دسر'),
+        // Using encodeURIComponent on each segment
+        '/dynamic/%D8%B3%D9%84%D8%A7%D9%85%20%DA%86%D8%B7%D9%88%D8%B1%DB%8C?q=cofee%2Cfood%2C%D8%AF%D8%B3%D8%B1'
+      ]
+    }
+  }
+}
+</script>
+
 <style scoped>
 a {
   color: grey;

test/fixtures/encoding/pages/@about.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    About
+  </div>
+</template>

test/fixtures/encoding/pages/dynamic/_id.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div>Query (SSR): <pre v-text="q" /> </div>
+    <div>Params (SSR): <pre v-text="p" /> </div>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ route }) {
+    return {
+      q: JSON.stringify(route.query),
+      p: JSON.stringify(route.params)
+    }
+  }
+}
+</script>

test/fixtures/encoding/pages/redirect.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Redirecting...
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ redirect }) {
+    return redirect('/dynamic/重新导向?foo bar')
+  }
+}
+</script>