fix(server, vue-app): allow unicode page names (#4402)

packages/server/src/middleware/nuxt.js

@@ -7,11 +7,12 @@ import { getContext } from '@nuxt/common'
 export default ({ options, nuxt, renderRoute, resources }) => async function nuxtMiddleware(req, res, next) {
   // Get context
   const context = getContext(req, res)
+  const url = req.url
 
   res.statusCode = 200
   try {
-    const result = await renderRoute(req.url, context)
+    const result = await renderRoute(url, context)
-    await nuxt.callHook('render:route', req.url, result, context)
+    await nuxt.callHook('render:route', url, result, context)
     const {
       html,
       cspScriptSrcHashSet,
@@ -21,7 +22,7 @@ export default ({ options, nuxt, renderRoute, resources }) => async function nux
     } = result
 
     if (redirected) {
-      nuxt.callHook('render:routeDone', req.url, result, context)
+      nuxt.callHook('render:routeDone', url, result, context)
       return html
     }
     if (error) {
@@ -34,7 +35,7 @@ export default ({ options, nuxt, renderRoute, resources }) => async function nux
       if (fresh(req.headers, { etag })) {
         res.statusCode = 304
         res.end()
-        nuxt.callHook('render:routeDone', req.url, result, context)
+        nuxt.callHook('render:routeDone', url, result, context)
         return
       }
       res.setHeader('ETag', etag)
@@ -73,7 +74,7 @@ export default ({ options, nuxt, renderRoute, resources }) => async function nux
     res.setHeader('Accept-Ranges', 'none') // #3870
     res.setHeader('Content-Length', Buffer.byteLength(html))
     res.end(html, 'utf8')
-    nuxt.callHook('render:routeDone', req.url, result, context)
+    nuxt.callHook('render:routeDone', url, result, context)
     return html
   } catch (err) {
     /* istanbul ignore if */

packages/vue-app/package.json

@@ -8,6 +8,7 @@
     "template"
   ],
   "main": "dist/vue-app.js",
+  "typings": "types/index.d.ts",
   "publishConfig": {
     "access": "public"
   },

packages/vue-app/template/utils.js

@@ -242,7 +242,7 @@ export function getLocation(base, mode) {
   if (base && path.indexOf(base) === 0) {
     path = path.slice(base.length)
   }
-  return (path || '/') + window.location.search + window.location.hash
+  return decodeURI(path || '/') + window.location.search + window.location.hash
 }
 
 export function urlJoin() {

test/fixtures/basic/nuxt.config.js

@@ -31,6 +31,7 @@ export default {
       '/store-module',
       '/users/1',
       '/users/2',
+      '/тест雨',
       { route: '/users/3', payload: { id: 3000 } }
     ],
     interval: 200,

test/fixtures/basic/pages/тест雨.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Hello unicode!</div>
+</template>

test/fixtures/spa/pages/тест雨.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>Hello unicode SPA!</div>
+</template>
+<script>
+export default {
+  mounted() {
+    window.indexMounted = (+window.indexMounted) + 1
+    console.log('mounted') // eslint-disable-line no-console
+  }
+}
+</script>

test/unit/basic.generate.test.js

@@ -129,6 +129,12 @@ describe('basic generate', () => {
     expect(html).toContain('<p>Nuxt.js</p>')
   })
 
+  test('/тест雨 (test non ascii route)', async () => {
+    const window = await generator.nuxt.server.renderAndGetWindow(url('/тест雨'))
+    const html = window.document.body.innerHTML
+    expect(html).toContain('Hello unicode')
+  })
+
   test('/users/1/index.html', async () => {
     const html = await rp(url('/users/1/index.html'))
     expect(html).toContain('<h1>User: 1</h1>')

test/unit/basic.ssr.test.js

@@ -314,6 +314,11 @@ describe('basic ssr', () => {
     expect(html).toContain('<h1>vue file is first-class</h1>')
   })
 
+  test('/тест雨 (test non ascii route)', async () => {
+    const { html } = await nuxt.server.renderRoute('/тест雨')
+    expect(html).toMatch('Hello unicode')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()

test/unit/spa.test.js

@@ -60,6 +60,13 @@ describe('spa', () => {
     expect(html).toMatch('error handler triggered: asyncData error!')
   })
 
+  test('/тест雨 (test non ascii route)', async () => {
+    const { html } = await renderRoute('/тест雨')
+    expect(html).toMatch('Hello unicode SPA!')
+    expect(consola.log).not.toHaveBeenCalledWith('created')
+    expect(consola.log).toHaveBeenCalledWith('mounted')
+    consola.log.mockClear()
+  })
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()