fix(vue-app): decode router base to support unicode characters (#5297)

packages/vue-app/template/router.js

@@ -154,7 +154,7 @@ const scrollBehavior = function (to, from, savedPosition) {
 export function createRouter() {
   return new Router({
     mode: '<%= router.mode %>',
-    base: '<%= router.base %>',
+    base: decodeURI('<%= router.base %>'),
     linkActiveClass: '<%= router.linkActiveClass %>',
     linkExactActiveClass: '<%= router.linkExactActiveClass %>',
     scrollBehavior,

test/fixtures/unicode-base/nuxt.config.js

@@ -0,0 +1,5 @@
+export default {
+  router: {
+    base: '/%C3%B6/'
+  }
+}

test/fixtures/unicode-base/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Unicode base works!</h1>
+</template>

test/fixtures/unicode-base/unicode-base.test.js

@@ -0,0 +1,3 @@
+import { buildFixture } from '../../utils/build'
+
+buildFixture('unicode-base')

test/unit/unicode-base.test.js

@@ -0,0 +1,30 @@
+import { getPort, loadFixture, Nuxt } from '../utils'
+
+let port
+const url = route => 'http://localhost:' + port + route
+
+let nuxt = null
+
+describe('unicode-base', () => {
+  beforeAll(async () => {
+    const config = await loadFixture('unicode-base')
+    nuxt = new Nuxt(config)
+    await nuxt.ready()
+
+    port = await getPort()
+    await nuxt.server.listen(port, 'localhost')
+  })
+
+  test('/ö/ (router base)', async () => {
+    const window = await nuxt.server.renderAndGetWindow(url('/ö/'))
+
+    const html = window.document.body.innerHTML
+    // important to have the actual page transition classes here -> page works, no hydration error
+    expect(html).toContain('<h1 class="page-enter page-enter-active">Unicode base works!</h1>')
+  })
+
+  // Close server and ask nuxt to stop listening to file changes
+  afterAll(async () => {
+    await nuxt.close()
+  })
+})