Nuxt.js: beforeRouteUpdate is called after asyncData

[moltar]

Version

v2.12.2

Reproduction link

https://github.com/moltar/route-hooks#readme

Steps to reproduce

git clone [email protected]:moltar/route-hooks.git
cd route-hooks
npm i
npm run dev
open http://localhost:3000/foo/1

1. Open browser console
2. Click Next Page
3. Observe console.log output

What is expected ?

beforeRouteUpdate should be called before asyncData

What is actually happening?

beforeRouteUpdate is called after asyncData

_{This bug report is available on Nuxt community (#c10613)}

[moltar]

Relevant code chunks:

asyncData is called here:

https://github.com/nuxt/nuxt.js/blob/479e3ffefb6cca8f3194cc4661d52be8e7b4f529/packages/vue-app/template/client.js#L432

Routing happens here:

https://github.com/nuxt/nuxt.js/blob/479e3ffefb6cca8f3194cc4661d52be8e7b4f529/packages/vue-app/template/client.js#L532

[pimlie]

Should it though? Within asyncData you can still decide to redirect to another page, so it makes sense that it runs before the nav guards for the initially intended route are triggered.

[moltar]

To me asyncData is associated with loading of a new page. By that logic any un-loading should happen before that.

I think all other guards come after, but I am just talking about beforeRouteUpdate.

Here's the full router nav flow for reference: https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[moltar]

It’s not stale. Still relevant.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[moltar]

This bot is extremely annoying. The issue is not stale.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[moltar]

The issue is not stale.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[moltar]

The issue is not stale.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[moltar]

Stale not

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[moltar]

...

[Atinux]

Hi @moltar

Actually, you should use the middleware that are called before asyncData instead.