router hook that executes after route leave but before route enter on reused route components

[autumnwoodberry]

What problem does this feature solve?

This will allow asynchronous code to prevent entering a new route, while allowing the current route component to exit.

Imagine you have a route component that requires some data to be fetched from the server before entering. If the route params change and the data needs to be refreshed, there is currently not a router hook that will allow the current component to transition out before fetching the new data.

A forum post is here: https://forum.vuejs.org/t/beforerouteenter-beforerouteupdate/21661

A codepen example is here: https://codepen.io/autumnwoodberry/pen/NwaxLZ

What does the proposed API look like?

afterUpdateBeforeEnter (to, from, next) {
  return http.fetch(to.params.slug).then(next)
}

Basically, this would function exactly like beforeRouteUpdate, but will allow the current component to leave before executing.

[posva]

I'm not sure I understood correctly. Is the problem that cats appear in the dog view just before the out transition happens? If that's the problem, it's because you're using the param as the key for the router-view but displaying part of the state, and the transition happens just after the state is updated and therefore displays the updated version. To fix that, you just need to use the variable from the store as the key instead <router-view :key="$store.state.special"/>

[autumnwoodberry]

@posva You understood correctly. I was not thinking of the way I keyed the route component. Thanks for the help!