fix(vue-app): pass router mode to getLocation (#6658)

packages/vue-app/template/index.js

@@ -137,7 +137,7 @@ async function createApp (ssrContext) {
   if (ssrContext) {
     route = router.resolve(ssrContext.url).route
   } else {
-    const path = getLocation(router.options.base)
+    const path = getLocation(router.options.base, router.options.mode)
     route = router.resolve(path).route
   }
 

test/fixtures/spa-hash/nuxt.config.js

@@ -0,0 +1,13 @@
+import { resolve } from 'path'
+import defaultsDeep from 'lodash/defaultsDeep'
+import baseNuxtConfig from '../spa/nuxt.config'
+
+const config = {
+  buildDir: resolve(__dirname, '.nuxt'),
+  srcDir: resolve(__dirname, '..', 'spa'),
+  router: {
+    mode: 'hash'
+  }
+}
+
+export default defaultsDeep(config, baseNuxtConfig)

test/fixtures/spa/nuxt.config.js

@@ -25,7 +25,10 @@ export default {
   router: {
     middleware: 'middleware'
   },
-  plugins: ['~/plugins/error.js'],
+  plugins: [
+    '~/plugins/error.js',
+    '~/plugins/path.js'
+  ],
   hooks: {
     'render:route': (url, page, { req, res }) => {
       page.html = modifyHtml(page.html)

test/fixtures/spa/pages/route-path.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Route path: {{ $routeFullPath }}</div>
+</template>

test/fixtures/spa/plugins/path.js

@@ -0,0 +1,4 @@
+export default function ({ route }, inject) {
+  // Inject route's fullPath as seen initially within the plugin.
+  inject('routeFullPath', route.fullPath)
+}

test/fixtures/spa/spa.test.js

@@ -1,3 +1,6 @@
 import { buildFixture } from '../../utils/build'
 
+// These two must not build concurrently to avoid changed-files check failing.
+// That's why building both from same test file.
 buildFixture('spa')
+buildFixture('spa-hash')

test/unit/spa.test.js

@@ -1,161 +1,174 @@
 import consola from 'consola'
 import { loadFixture, getPort, Nuxt, wChunk } from '../utils'
 
-let nuxt, port
-const url = route => 'http://localhost:' + port + route
+// Runs tests in specified router mode (either "hash" or "history").
+function spaTests ({ isHashMode }) {
+  let nuxt, port
+  const url = route => `http://localhost:${port}${isHashMode ? '/#' : ''}${route}`
 
-const renderRoute = async (_url) => {
-  const window = await nuxt.server.renderAndGetWindow(url(_url))
-  const head = window.document.head.innerHTML
-  const html = window.document.body.innerHTML
-  return { window, head, html }
-}
+  const renderRoute = async (_url) => {
+    const window = await nuxt.server.renderAndGetWindow(url(_url))
+    const head = window.document.head.innerHTML
+    const html = window.document.body.innerHTML
+    return { window, head, html }
+  }
 
-describe('spa', () => {
-  beforeAll(async () => {
-    const config = await loadFixture('spa')
-    nuxt = new Nuxt(config)
-    await nuxt.ready()
+  describe(`spa${isHashMode ? ' (hash)' : ''}`, () => {
+    beforeAll(async () => {
+      const fixture = isHashMode ? 'spa-hash' : 'spa'
+      const config = await loadFixture(fixture)
+      nuxt = new Nuxt(config)
+      await nuxt.ready()
 
-    port = await getPort()
-    await nuxt.server.listen(port, 'localhost')
-  })
-
-  test('/ (basic spa)', async () => {
-    const { html } = await renderRoute('/')
-    expect(html).toMatch('Hello SPA!')
-    expect(consola.log).not.toHaveBeenCalledWith('created')
-    expect(consola.log).toHaveBeenCalledWith('mounted')
-    consola.log.mockClear()
-  })
-
-  test('/ (include preload and prefetch resources)', async () => {
-    const { head } = await renderRoute('/')
-    expect(head).toMatch(`<link rel="preload" href="/_nuxt/runtime.js" as="script">`)
-    expect(head).toMatch(`<link rel="preload" href="/_nuxt/commons.app.js" as="script">`)
-    expect(head).toMatch(`<link rel="preload" href="/_nuxt/app.js" as="script">`)
-    expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/custom.js')}">`)
-    expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler-async.js')}">`)
-    expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler-object.js')}">`)
-    expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler-string.js')}">`)
-    expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler.js')}">`)
-    expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/index.js')}">`)
-    expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/mounted.js')}">`)
-    consola.log.mockClear()
-  })
-
-  test('/custom (custom layout)', async () => {
-    const { html } = await renderRoute('/custom')
-    expect(html).toMatch('Custom layout')
-    expect(consola.log).toHaveBeenCalledWith('created')
-    expect(consola.log).toHaveBeenCalledWith('mounted')
-    consola.log.mockClear()
-  })
-
-  test('/mounted', async () => {
-    const { html } = await renderRoute('/mounted')
-    expect(html).toMatch('<h1>Test: updated</h1>')
-  })
-
-  test('/error-handler', async () => {
-    const { html } = await renderRoute('/error-handler')
-    expect(html).toMatch('error handler triggered: fetch error!')
-  })
-
-  test('/error-handler-object', async () => {
-    const { html } = await renderRoute('/error-handler-object')
-    expect(html).toMatch('error handler triggered: fetch error!')
-  })
-
-  test('/error-handler-string', async () => {
-    const { html } = await renderRoute('/error-handler-string')
-    expect(html).toMatch('error handler triggered: fetch error!')
-  })
-
-  test('/error-handler-async', async () => {
-    const { html } = await renderRoute('/error-handler-async')
-    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()
-  })
-
-  test('/async no asyncData leak', async () => {
-    const window = await nuxt.server.renderAndGetWindow(url('/async'))
-
-    const navigate = url => new Promise((resolve, reject) => {
-      window.$nuxt.$router.push(url, resolve, reject)
+      port = await getPort()
+      await nuxt.server.listen(port, 'localhost')
     })
 
-    for (let i = 0; i < 3; i++) {
-      await navigate('/')
-      await navigate('/async')
-    }
+    test('/ (basic spa)', async () => {
+      const { html } = await renderRoute('/')
+      expect(html).toMatch('Hello SPA!')
+      expect(consola.log).not.toHaveBeenCalledWith('created')
+      expect(consola.log).toHaveBeenCalledWith('mounted')
+      consola.log.mockClear()
+    })
 
-    const { $data } = window.$nuxt.$route.matched[0].instances.default
-    expect(Object.keys($data).length).toBe(1)
-    consola.log.mockClear()
+    test('/ (include preload and prefetch resources)', async () => {
+      const { head } = await renderRoute('/')
+      expect(head).toMatch(`<link rel="preload" href="/_nuxt/runtime.js" as="script">`)
+      expect(head).toMatch(`<link rel="preload" href="/_nuxt/commons.app.js" as="script">`)
+      expect(head).toMatch(`<link rel="preload" href="/_nuxt/app.js" as="script">`)
+      expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/custom.js')}">`)
+      expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler-async.js')}">`)
+      expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler-object.js')}">`)
+      expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler-string.js')}">`)
+      expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/error-handler.js')}">`)
+      expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/index.js')}">`)
+      expect(head).toMatch(`<link rel="prefetch" href="/_nuxt/${wChunk('pages/mounted.js')}">`)
+      consola.log.mockClear()
+    })
+
+    test('/custom (custom layout)', async () => {
+      const { html } = await renderRoute('/custom')
+      expect(html).toMatch('Custom layout')
+      expect(consola.log).toHaveBeenCalledWith('created')
+      expect(consola.log).toHaveBeenCalledWith('mounted')
+      consola.log.mockClear()
+    })
+
+    test('/mounted', async () => {
+      const { html } = await renderRoute('/mounted')
+      expect(html).toMatch('<h1>Test: updated</h1>')
+    })
+
+    test('Initial route has correct fullPath', async () => {
+      const { html } = await renderRoute('/route-path')
+      expect(html).toContain('<div>Route path: /route-path</div>')
+    })
+
+    test('/error-handler', async () => {
+      const { html } = await renderRoute('/error-handler')
+      expect(html).toMatch('error handler triggered: fetch error!')
+    })
+
+    test('/error-handler-object', async () => {
+      const { html } = await renderRoute('/error-handler-object')
+      expect(html).toMatch('error handler triggered: fetch error!')
+    })
+
+    test('/error-handler-string', async () => {
+      const { html } = await renderRoute('/error-handler-string')
+      expect(html).toMatch('error handler triggered: fetch error!')
+    })
+
+    test('/error-handler-async', async () => {
+      const { html } = await renderRoute('/error-handler-async')
+      expect(html).toMatch('error handler triggered: asyncData error!')
+    })
+
+    const testRunner = isHashMode ? test.skip : test
+    testRunner('/тест雨 (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()
+    })
+
+    test('/async no asyncData leak', async () => {
+      const window = await nuxt.server.renderAndGetWindow(url('/async'))
+
+      const navigate = url => new Promise((resolve, reject) => {
+        window.$nuxt.$router.push(url, resolve, reject)
+      })
+
+      for (let i = 0; i < 3; i++) {
+        await navigate('/')
+        await navigate('/async')
+      }
+
+      const { $data } = window.$nuxt.$route.matched[0].instances.default
+      expect(Object.keys($data).length).toBe(1)
+      consola.log.mockClear()
+    })
+
+    test('/redirect-done (no redirect)', async () => {
+      const { html } = await renderRoute('/redirect-done')
+      expect(html).toContain('<div>Redirect Done Page</div>')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done created')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
+      expect(consola.log).toHaveBeenCalledTimes(2)
+      consola.log.mockClear()
+    })
+
+    test('/redirect1 (redirect 1 time)', async () => {
+      const { html } = await renderRoute('/redirect1')
+      expect(html).toContain('<div>Redirect Done Page</div>')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done created')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
+      expect(consola.log).toHaveBeenCalledTimes(2)
+      consola.log.mockClear()
+    })
+
+    test('/redirect2 (redirect 2 times)', async () => {
+      const { html } = await renderRoute('/redirect2')
+      expect(html).toContain('<div>Redirect Done Page</div>')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done created')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
+      expect(consola.log).toHaveBeenCalledTimes(2)
+      consola.log.mockClear()
+    })
+
+    test('/redirect10 (redirect 10 times)', async () => {
+      const { html } = await renderRoute('/redirect10')
+      expect(html).toContain('<div>Redirect Done Page</div>')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done created')
+      expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
+      expect(consola.log).toHaveBeenCalledTimes(2)
+      consola.log.mockClear()
+    })
+
+    test('render:route hook does not corrupt the cache', async () => {
+      const window1 = await nuxt.server.renderAndGetWindow(url('/'))
+      const html1 = window1.document.body.innerHTML
+      expect(html1).toContain('extra html from render:route hook')
+      expect(html1.match(/render:route/g).length).toBe(1)
+
+      window1.close()
+
+      const window2 = await nuxt.server.renderAndGetWindow(url('/'))
+      const html2 = window2.document.body.innerHTML
+      expect(html2).toContain('extra html from render:route hook')
+      expect(html2.match(/render:route/g).length).toBe(1)
+
+      window2.close()
+    })
+
+    // Close server and ask nuxt to stop listening to file changes
+    afterAll(async () => {
+      await nuxt.close()
+    })
   })
+}
 
-  test('/redirect-done (no redirect)', async () => {
-    const { html } = await renderRoute('/redirect-done')
-    expect(html).toContain('<div>Redirect Done Page</div>')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done created')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
-    expect(consola.log).toHaveBeenCalledTimes(2)
-    consola.log.mockClear()
-  })
-
-  test('/redirect1 (redirect 1 time)', async () => {
-    const { html } = await renderRoute('/redirect1')
-    expect(html).toContain('<div>Redirect Done Page</div>')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done created')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
-    expect(consola.log).toHaveBeenCalledTimes(2)
-    consola.log.mockClear()
-  })
-
-  test('/redirect2 (redirect 2 times)', async () => {
-    const { html } = await renderRoute('/redirect2')
-    expect(html).toContain('<div>Redirect Done Page</div>')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done created')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
-    expect(consola.log).toHaveBeenCalledTimes(2)
-    consola.log.mockClear()
-  })
-
-  test('/redirect10 (redirect 10 times)', async () => {
-    const { html } = await renderRoute('/redirect10')
-    expect(html).toContain('<div>Redirect Done Page</div>')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done created')
-    expect(consola.log).toHaveBeenCalledWith('redirect-done mounted')
-    expect(consola.log).toHaveBeenCalledTimes(2)
-    consola.log.mockClear()
-  })
-
-  test('render:route hook does not corrupt the cache', async () => {
-    const window1 = await nuxt.server.renderAndGetWindow(url('/'))
-    const html1 = window1.document.body.innerHTML
-    expect(html1).toContain('extra html from render:route hook')
-    expect(html1.match(/render:route/g).length).toBe(1)
-
-    window1.close()
-
-    const window2 = await nuxt.server.renderAndGetWindow(url('/'))
-    const html2 = window2.document.body.innerHTML
-    expect(html2).toContain('extra html from render:route hook')
-    expect(html2.match(/render:route/g).length).toBe(1)
-
-    window2.close()
-  })
-
-  // Close server and ask nuxt to stop listening to file changes
-  afterAll(async () => {
-    await nuxt.close()
-  })
-})
+spaTests({})
+spaTests({ isHashMode: true })