afterResolve global navigation hook

[cironunes]

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.

[posva]

What do you need to do there that you cannot do in afterEach?

[cironunes]

Run callback functions after the URL changes

[posva]

but you already have the url in afterEach in to.fullPath

[cironunes]

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-links and verify the console.

This would be solved if we could create a global navigation guard to run before (or after) the postEnterCbs

[posva]

In that case, would you still use afterEach? Maybe afterEach should simply be called once the url in the browser is updated

[cironunes]

@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 afterEach be called once the URL is updated?

[cironunes]

Any news? I'm happy to update my PR.

[posva]

hello, I think it will make more sense if afterEach hooks 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 before afterEach hooks, but this shouldn't be a problem. If it is, please tell me how it would be 🙂

[chrisnicola]

@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 that afterEach was 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.

[maroon1]

@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]

you have router.onError for global errors

[maroon1]

How do we determine the end of navigation for navigation canceled by invoking next(false)?

[maroon1]

There is a series of event in angular router, so we can listen to some interested event to do something.

[chrisnicola]

@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 onAbort that doesn't require an error, but I'd be concerned about being able to determine the cause given that only false is passed. In my mind this is the benefit of passing the Error object.

Do you have a use case where you want to do something globally after aborting that is not an error?

[maroon1]

@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 beforeRouteEnter or beforeEnter hook 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]

Is there a reason afterEach can'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 next at the component level?