afterResolve global navigation hook #2079
Description
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?
routerInstance.afterResolve(cb);
function cb(from, to, next) {...}I'd love to submit a PR if that's something you'd like to have.
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Participants
Activity
posva commentedon Feb 28, 2018
What do you need to do there that you cannot do in
afterEach?cironunes commentedon Feb 28, 2018
Run callback functions after the URL changes
posva commentedon Feb 28, 2018
but you already have the url in afterEach in
to.fullPathcironunes commentedon Feb 28, 2018
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:
Repository: https://github.com/cironunes/vue-router-afterEach
Demo: https://cironunes.github.io/vue-router-afterEach/#/
Please click the
route-linksand verify the console.This would be solved if we could create a global navigation guard to run before (or after) the
postEnterCbs[-]afterResolve global navigation guard[/-][+]afterResolve global navigation hook[/+]posva commentedon Mar 1, 2018
In that case, would you still use
afterEach? MaybeafterEachshould simply be called once the url in the browser is updatedcironunes commentedon Mar 1, 2018
@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
afterEachbe called once the URL is updated?cironunes commentedon Mar 15, 2018
Any news? I'm happy to update my PR.
feat(url): call afterEach hooks after url is ensured
posva commentedon Jul 10, 2018
hello, I think it will make more sense if
afterEachhooks are called once url is updated.I don't see what usecase would require afterEach to be executed before. Do you (or any other person interested in this) see any inconvenience with #2292 ? The only change is that
onComplete(router.push) will get executed beforeafterEachhooks, but this shouldn't be a problem. If it is, please tell me how it would be 🙂chrisnicola commentedon Oct 4, 2018
@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
setTimeout(fn, 0)works as a bit of a hack for now, but is a less than ideal solution. I was kind of surprised thatafterEachwas not called after the components had been fully loaded.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.
1 remaining item
feat(url): call afterEach hooks after url is ensured
maroon1 commentedon Oct 15, 2019
@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.
posva commentedon Oct 15, 2019
you have
router.onErrorfor global errorsmaroon1 commentedon Oct 17, 2019
How do we determine the end of navigation for navigation canceled by invoking
next(false)?maroon1 commentedon Oct 17, 2019
There is a series of event in angular router, so we can listen to some interested event to do something.
chrisnicola commentedon Oct 18, 2019
@maroon1 if you want to handle something after aborting I think @posva is correct, you should pass an error like
next(Error)and router.onError, will be called.I could potentially see a use case for supporting an
onAbortthat doesn't require an error, but I'd be concerned about being able to determine the cause given that onlyfalseis passed. In my mind this is the benefit of passing theErrorobject.Do you have a use case where you want to do something globally after aborting that is not an error?
maroon1 commentedon Oct 18, 2019
@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
beforeRouteEnterorbeforeEnterhook and show the progress bar before navigation , so i need to know what time to hide the progress bar.It's obvious that the progress could be hidden after end of navigation either success or failure. In this case we don't care about the result of navigation, just know it's end and do some thing finally.chrisnicola commentedon Oct 21, 2019
Is there a reason
afterEachcan't be used for this?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
nextat the component level?[a11y] Fix: corrije el título que se anuncia al cargar una página
feat(url): call afterEach hooks after url is ensured (#2292)
[a11y] Fix: corrije el título que se anuncia al cargar una página