Vue-router: Fire an event after the matched component mounts

[scottbedard]

What problem does this feature solve?

Split testing tools like VWO need to be notified when the route has both changed, and the dom is ready to be manipulated. Currently we can get around this by manually triggering it from our component's mounted hooks, but it's a pain having to remember to do so for each route.

The event I'm proposing would fire after the route has been matched, and all of the components have mounted.

What does the proposed API look like?

Similar to beforeRouteEnter

afterRouteEnter(to, from) {
    // do stuff
}

[GoodeUser]

👍

[posva]

Thanks for the proposal.
Declaring it as a new property in the component doesn't add anything, you'll have _to remember_ anyways.
If you want something global, there's already router.afterEach (+Vue.nextTick) where you can implement your splitting logic.
On top of that, it's a new way of doing something that's already possible with native lifecycle hooks, which is what we want people to think about, so we recommend to use any of the methods above 🙂

[scottbedard]

Ah, I didn't think to combine afterEach with Vue.nextTick. This should do what I need, thanks @posva!

[EvilKot]

Just wondering which one of native hooks gets called, after beforeRouteEnter which attached to the vue component (In-Component Guard)?
I need to pass data using next function and when the route is finally changed make an ajax request based on that data. I'm required to resolve the route first because i have another routes, where user can be redirected after ajax request and their guards should know from where the user came from.
For now i can use next callback to make a request, but i'd like to see the afterRouteEnter hook too.