Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
spaceemotion opened this issue Nov 12, 2023 · 7 comments
Closed

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

spaceemotion opened this issue Nov 12, 2023 · 7 comments

Comments

@spaceemotion
Copy link

spaceemotion commented Nov 12, 2023

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:

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.
However, you can access the instance by passing a callback to `next`. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument:

Copy link
Member

posva commented Nov 12, 2023

It seems to be working as expected:

Screenshot 2023-11-12 at 18.11.38.png

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

@posva posva closed this as not planned Won't fix, can't repro, duplicate, stale Nov 12, 2023
@spaceemotion
Copy link
Author

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

@posva
Copy link
Member

posva commented Nov 12, 2023

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

@spaceemotion
Copy link
Author

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
Copy link
Member

posva commented Nov 13, 2023

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

@spaceemotion
Copy link
Author

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
Copy link
Member

posva commented Nov 14, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants