BeforeRouteEnter() happens after mounted() after upgrade.

[steven-twerdochlib]

Hey,
I've been upgrading my project from Vue2 so now using router v4 and vue3.
Previously, my code ran beforeRouteEnter() function and then mounted() function but now (using console.logs();), I've noticed their running the other way round with mounted() running first?
Can anyone explain this, I can't see anything in the docs about it?

[skirtles-code]

Are the beforeRouteEnter and mounted in the same component?

Is the logging done immediately, at the top of the hook, or do you have some asynchronous code that might be delaying the logging?

I've adjusted the example from the Vue Router docs to use those two hooks:

• Playground

beforeRouteEnter definitely runs before mounted.

As mentioned in the docs:

The beforeRouteEnter guard does NOT have access to this, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.

If it hasn't been created then it definitely hasn't been mounted.

[steven-twerdochlib]

Hi @skirtles-code,
Thanks for the quick response, you're right I should've put the logging at the first line of the methods, it is run correctly. It appears the console logs start to switch around at this part of code in beforeRouteEnter():
next((vm: any) => { console.log(3); vm.randomFunction(); });
Is there something that has changed since Vue2/Router3 to cause this? Also what would you recommend as the best solution to this?