(vue-app) - route navigation guards are not processed on client side when calling createApp

[enwin]

When the client side script starts, the navigation guards are skipped, preventing the route to reflect any change made through these guards. Adding to that, when resolving components later in the client.js script, the context route is not passed to the resolveComponents method. Like in the server.js previous issue #9009 a new route resolution is created without using the navigation guards that could have been added.

This complete the #9009 issue. Sorry I missed that earlier.

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.

When createApp is called client side, navigation guards are skipped: https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/index.js#L267

When the client gets the matched component for the given url. The component resolution using router.match(path) is not picking up the changes made by the navigation guards resulting in the wrong components to be matched and rendered. See https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/client.js#L235

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/interesting-perlman-4v1b9

Direct test urls:

• https://4v1b9.sse.codesandbox.io/category
• https://4v1b9.sse.codesandbox.io/content

Steps to reproduce

1. Navigate to https://4v1b9.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://4v1b9.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://4v1b9.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 client side 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