-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
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
afterResolve global navigation hook #2079
Comments
What do you need to do there that you cannot do in |
Run callback functions after the URL changes |
but you already have the url in afterEach in |
Yes. Issue is that the URL in the browser doesn't match and we have automated scripts that rely on that. I created a repository reproducing what I mean: Please click the This would be solved if we could create a global navigation guard to run before (or after) the |
In that case, would you still use |
@posva yep. Also thought about it. My concern was to introduce a breaking change so I though I just add a new hook instead. Would you be happy to accept my PR if I change it to make |
Any news? I'm happy to update my PR. |
Closes #2079 This helps integrating with external scripts and makes more sense as the navigation is finished. However, onComplete callback passed to `router.push` is now called before `afterEach` hooks. This shouldn't be a problem as there's no guarantee provided anywhere in the docs about this
hello, I think it will make more sense if |
@posva I agree with this, I just noticed while hooking up some analytics scripts that the URL is not updated when afterEach is called. Using Another reason for that is that it is common to also often updating the HTML title value using the main route component. Again analytics/tracking scripts often rely on reading this metadata. Completely agree with having afterEach wait until the route is full loaded and the component is rendered. |
Closes #2079 This helps integrating with external scripts and makes more sense as the navigation is finished. However, onComplete callback passed to `router.push` is now called before `afterEach` hooks. This shouldn't be a problem as there's no guarantee provided anywhere in the docs about this
@posva I think that is useful there is a way to track the lifecycle of the router. for now, it seems that we can not globally handle navigation failed or canceled. |
you have |
How do we determine the end of navigation for navigation canceled by invoking |
There is a series of event in angular router, so we can listen to some interested event to do something. |
@maroon1 if you want to handle something after aborting I think @posva is correct, you should pass an error like I could potentially see a use case for supporting an Do you have a use case where you want to do something globally after aborting that is not an error? |
@chrisnicola I want to implement a feature that show a indicator(a top progress bar) when navigating. I put all data request(or other async action) in |
Is there a reason Do I understand correctly that you are looking for a global hook that is run after step 12 in this list that includes a reference to the component instance? https://router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow @posva is there any reason this shouldn't be supported with a global hook instead of requiring a callback passed to |
En Firefox al menos se anunciaba el título de la página anterior. El hook `afterEach` de vue-router se ejecuta ANTES de que termine de armarse el componente de la página y vue-announcer lee el título ANTES de que se actualice. En vue-announcer lo tienen en cuenta pero parece que en Firefox no funciona su fix: vue-a11y/vue-announcer@50c3cae#diff-1fdf421c05c1140f6d71444ea2b27638 En vue-router tienen previsto hacer cambios en el hook para evitar este tipo de problemas: vuejs/vue-router#2079
Closes #2079 This helps integrating with external scripts and makes more sense as the navigation is finished. However, onComplete callback passed to `router.push` is now called before `afterEach` hooks. This shouldn't be a problem as there's no guarantee provided anywhere in the docs about this
En Firefox al menos se anunciaba el título de la página anterior. El hook `afterEach` de vue-router se ejecuta ANTES de que termine de armarse el componente de la página y vue-announcer lee el título ANTES de que se actualice. En vue-announcer lo tienen en cuenta pero parece que en Firefox no funciona su fix: vue-a11y/vue-announcer@50c3cae#diff-1fdf421c05c1140f6d71444ea2b27638 En vue-router tienen previsto hacer cambios en el hook para evitar este tipo de problemas: vuejs/vue-router#2079
What problem does this feature solve?
As opposed to
beforeResolve
,afterResolve
would wait until the navigation is done and trigger the registered callbacks.The main reason for that is to be able to track events in the right moment, with the proper url in place, globally.
What does the proposed API look like?
I'd love to submit a PR if that's something you'd like to have.
The text was updated successfully, but these errors were encountered: