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,19 +1,22 @@
 import consola from 'consola'
 import { loadFixture, getPort, Nuxt, wChunk } from '../utils'
 
-let nuxt, port
+// Runs tests in specified router mode (either "hash" or "history").
-const url = route => 'http://localhost:' + port + route
+function spaTests ({ isHashMode }) {
+  let nuxt, port
+  const url = route => `http://localhost:${port}${isHashMode ? '/#' : ''}${route}`
 
-const renderRoute = async (_url) => {
+  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', () => {
+  describe(`spa${isHashMode ? ' (hash)' : ''}`, () => {
     beforeAll(async () => {
-    const config = await loadFixture('spa')
+      const fixture = isHashMode ? 'spa-hash' : 'spa'
+      const config = await loadFixture(fixture)
       nuxt = new Nuxt(config)
       await nuxt.ready()
 
@@ -57,6 +60,11 @@ describe('spa', () => {
       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!')
@@ -77,7 +85,8 @@ describe('spa', () => {
       expect(html).toMatch('error handler triggered: asyncData error!')
     })
 
-  test('/тест雨 (test non ascii route)', async () => {
+    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')
@@ -158,4 +167,8 @@ describe('spa', () => {
     afterAll(async () => {
       await nuxt.close()
     })
-})
+  })
+}
+
+spaTests({})
+spaTests({ isHashMode: true })