`next()` callback isn't executed outside of component scope

[spaceemotion]

Reproduction

https://codepen.io/spaceemotion/pen/BaMZJXZ

Steps to reproduce the bug

1. Click on About
2. Check Logs

Expected behavior

Two messages should appear. One during the switch, and one after the component has been renderered.

Actual behavior

Only the first message gets logged.

Additional information

I was sure this worked in the past, the docs even mention my expected behavior as intended, but it doesn't seem to work:

https://github.com/vuejs/router/blob/7ed003d1d2b0895a1f92b13ee5217c69e6372708/packages/docs/guide/advanced/navigation-guards.md?plain=1#L235-L237

[posva]

It seems to be working as expected:

shows 2 on the first navigation, then only the second one

[spaceemotion]

@posva sorry! i somehow copied the wrong codepen link. here is the version that doesn't work: https://codepen.io/spaceemotion/pen/BaMZJXZ

[posva]

I think you’re comparing beforeEnter with beforeRouteEnter but they are different. This is not expected to work with beforeEnter

[spaceemotion]

Okay, right now i have an async process that starts when the route changes and needs to end when the new route is displayed on screen. The current way shows the overlay, removes it - and for like half a second you see the old screen thinking something's wrong.

How can I achieve the beforeRouteEnter behavior on a global level?

[posva]

Move that to the component options, declaring a second script if using script setup

[spaceemotion]

Okay. How would i go about doing that if the route that's being loaded has no component yet? it's an async component, so the actual rendering part takes a while.

[posva]

It should still be an option. BTW try to use the discussions or the Discord server for help