server.js - getMatchedComponents is called with wrong route

[enwin]

When generating a page from the server the getMatchedComponents method is called with a new route resolution instead of the already resolved route from the app. This will cause any potential navigation guard redirections to be omitted.

See https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/server.js#L159

const Components = getMatchedComponents(router.match(ssrContext.url))

should be changed to:

const Components = getMatchedComponents(app.context.route)

In my specific case, which can be tested with the reproduction link below, I create two routes with the same path but different components. We have specific rules for our website's urls. I use a route navigation guard to test the url parameters to decide if the url belongs to one page or the other. When the url should belong to the other page I use the next method with the new route parameters like documented here : https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards. This new route becomes available on the server side through app.context.route.

When the server gets the matched component for the given url. The route resolution using router.match(ssrContext.url) is not picking up the changes made by the navigation guards resulting in the wrong components to be matched and rendered.

Since the client side script is not having this problem, we get a DOM mismatch error when the client renders the page. ([Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.)

Versions

• nuxt: v2.15.3
• @nuxtjs/router-extras: 1.1.1

Reproduction

Codesandbox: https://codesandbox.io/s/quizzical-margulis-ic96z

Direct test urls:

• https://ic96z.sse.codesandbox.io/category
• https://ic96z.sse.codesandbox.io/content

Steps to reproduce

1. Navigate to https://ic96z.sse.codesandbox.io/category with the web console open
2. Notice the 3 console.log messages saying:

asyncData category
expected route name CategoryPage
current route name CategoryPage

3. expected and current route name are the same 👍

4. Navigate to https://ic96z.sse.codesandbox.io/content with the web console open

5. Notice the 3 console.log messages saying:

asyncData category
expected route name CategoryPage
current route name ContentPage

6. expected and current route name are not the same 👎 asyncData is not the good one

What is Expected?

When navigating to https://ic96z.sse.codesandbox.io/content the 3 console.log messages should be saying:

asyncData content
expected route name ContentPage
current route name ContentPage

What is actually happening?

The server side rendering is matching the CategoryPage component instead of the ContentPage page component because it uses a new route resolver instead of using the already resolved route that takes into account any navigation guard redirection that could have happened