diff --git a/packages/vue-app/template/client.js b/packages/vue-app/template/client.js index 5045862cb394..2f18fa7a8e12 100644 --- a/packages/vue-app/template/client.js +++ b/packages/vue-app/template/client.js @@ -229,10 +229,8 @@ function applySSRData (Component, ssrData) { } // Get matched components -function resolveComponents (router) { - const path = getLocation(router.options.base, router.options.mode) - - return flatMapComponents(router.match(path), async (Component, _, match, key, index) => { +function resolveComponents (route) { + return flatMapComponents(route, async (Component, _, match, key, index) => { // If component is not resolved yet, resolve it if (typeof Component === 'function' && !Component.options) { Component = await Component() @@ -884,7 +882,7 @@ async function mountApp (__app) { } <% if (features.transitions) { %> // Resolve route components - const Components = await Promise.all(resolveComponents(router)) + const Components = await Promise.all(resolveComponents(app.context.route)) // Enable transitions _app.setTransitions = _app.$options.nuxt.setTransitions.bind(_app) @@ -893,7 +891,7 @@ async function mountApp (__app) { _lastPaths = router.currentRoute.matched.map(route => compile(route.path)(router.currentRoute.params)) } <% } else if (features.asyncData || features.fetch) { %> - await Promise.all(resolveComponents(router)) + await Promise.all(resolveComponents(app.context.route)) <% } %> // Initialize error handler _app.$loading = {} // To avoid error while _app.$nuxt does not exist diff --git a/packages/vue-app/template/index.js b/packages/vue-app/template/index.js index 0a0db394cf01..58c1e231ee7d 100644 --- a/packages/vue-app/template/index.js +++ b/packages/vue-app/template/index.js @@ -267,26 +267,26 @@ async function createApp(ssrContext, config = {}) { } } - // If server-side, wait for async component to be resolved first - if (process.server && ssrContext && ssrContext.url) { - await new Promise((resolve, reject) => { - router.push(ssrContext.url, resolve, (err) => { - // https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js - if (!err._isRouter) return reject(err) - if (err.type !== 2 /* NavigationFailureType.redirected */) return resolve() + // Wait for async component to be resolved first + await new Promise((resolve, reject) => { + router.push(app.context.route.fullPath, resolve, (err) => { + // https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js + if (!err._isRouter) return reject(err) + if (err.type !== 2 /* NavigationFailureType.redirected */) return resolve() - // navigated to a different route in router guard - const unregister = router.afterEach(async (to, from) => { + // navigated to a different route in router guard + const unregister = router.afterEach(async (to, from) => { + if (process.server && ssrContext && ssrContext.url) { ssrContext.url = to.fullPath - app.context.route = await getRouteData(to) - app.context.params = to.params || {} - app.context.query = to.query || {} - unregister() - resolve() - }) + } + app.context.route = await getRouteData(to) + app.context.params = to.params || {} + app.context.query = to.query || {} + unregister() + resolve() }) }) - } + }) return { <% if(store) { %>store,<% } %> diff --git a/test/e2e/spa-base.browser.test.js b/test/e2e/spa-base.browser.test.js index 8eac938d7460..95a914524e02 100644 --- a/test/e2e/spa-base.browser.test.js +++ b/test/e2e/spa-base.browser.test.js @@ -26,7 +26,7 @@ describe('spa router base browser', () => { test('Open /app (router base)', async () => { page = await browser.page(url('/app')) - expect(await page.evaluate(() => location.href)).toBe(url('/app')) + expect(await page.evaluate(() => location.href)).toBe(url('/app/')) expect(await page.html()).not.toContain('This page could not be found')