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.