fix(vue-app): use app.context.route for resolving components (#9050)

This commit is contained in:
Thomas Beduneau 2021-04-01 12:00:51 +02:00 committed by GitHub
parent c04a793b4a
commit 04d33829f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 23 deletions

View File

@ -229,10 +229,8 @@ function applySSRData (Component, ssrData) {
} }
// Get matched components // Get matched components
function resolveComponents (router) { function resolveComponents (route) {
const path = getLocation(router.options.base, router.options.mode) return flatMapComponents(route, async (Component, _, match, key, index) => {
return flatMapComponents(router.match(path), async (Component, _, match, key, index) => {
// If component is not resolved yet, resolve it // If component is not resolved yet, resolve it
if (typeof Component === 'function' && !Component.options) { if (typeof Component === 'function' && !Component.options) {
Component = await Component() Component = await Component()
@ -884,7 +882,7 @@ async function mountApp (__app) {
} }
<% if (features.transitions) { %> <% if (features.transitions) { %>
// Resolve route components // Resolve route components
const Components = await Promise.all(resolveComponents(router)) const Components = await Promise.all(resolveComponents(app.context.route))
// Enable transitions // Enable transitions
_app.setTransitions = _app.$options.nuxt.setTransitions.bind(_app) _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)) _lastPaths = router.currentRoute.matched.map(route => compile(route.path)(router.currentRoute.params))
} }
<% } else if (features.asyncData || features.fetch) { %> <% } else if (features.asyncData || features.fetch) { %>
await Promise.all(resolveComponents(router)) await Promise.all(resolveComponents(app.context.route))
<% } %> <% } %>
// Initialize error handler // Initialize error handler
_app.$loading = {} // To avoid error while _app.$nuxt does not exist _app.$loading = {} // To avoid error while _app.$nuxt does not exist

View File

@ -267,26 +267,26 @@ async function createApp(ssrContext, config = {}) {
} }
} }
// If server-side, wait for async component to be resolved first // Wait for async component to be resolved first
if (process.server && ssrContext && ssrContext.url) { await new Promise((resolve, reject) => {
await new Promise((resolve, reject) => { router.push(app.context.route.fullPath, resolve, (err) => {
router.push(ssrContext.url, resolve, (err) => { // https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js
// https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js if (!err._isRouter) return reject(err)
if (!err._isRouter) return reject(err) if (err.type !== 2 /* NavigationFailureType.redirected */) return resolve()
if (err.type !== 2 /* NavigationFailureType.redirected */) return resolve()
// navigated to a different route in router guard // navigated to a different route in router guard
const unregister = router.afterEach(async (to, from) => { const unregister = router.afterEach(async (to, from) => {
if (process.server && ssrContext && ssrContext.url) {
ssrContext.url = to.fullPath ssrContext.url = to.fullPath
app.context.route = await getRouteData(to) }
app.context.params = to.params || {} app.context.route = await getRouteData(to)
app.context.query = to.query || {} app.context.params = to.params || {}
unregister() app.context.query = to.query || {}
resolve() unregister()
}) resolve()
}) })
}) })
} })
return { return {
<% if(store) { %>store,<% } %> <% if(store) { %>store,<% } %>

View File

@ -26,7 +26,7 @@ describe('spa router base browser', () => {
test('Open /app (router base)', async () => { test('Open /app (router base)', async () => {
page = await browser.page(url('/app')) 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') expect(await page.html()).not.toContain('This page could not be found')