Fire event when changing route with vue-router before DOM changes?

I'm quite new to Vue, hopefully this won't be a very stupid question :)

The beforeDestroy gets fired after the DOM structure changes.

I've tried using beforeUpdate and updated events, but none seems to fire before the DOM changes.

Reproduction online: https://jsfiddle.net/p2c3b10t/18/ (check the console)

Solution

When dealing with routing with Vue Router, instead of relying on the lifecycle hooks, use navigation guards. These guards hook into the route navigation process and can be either global, per-route, or in-component.

In this particular case, we are looking for the beforeRouteLeave in-component guard.

beforeRouteLeave (to, from, next) {
  // called when the route that renders this component is about to
  // be navigated away from.
  // has access to `this` component instance.
}

In this guard, we can access to and from, and call next.

export type NavigationGuard = (
  to: Route,
  from: Route,
  next: (to?: RawLocation | false | ((vm: Vue) => any) | void) => void
) => any

to is the target Route being navigated to.
from is the current Route being navigated away from.
next is the function that must be called to resolve the hook

After performing the logic inside this guard, one must call next() to resolve the hook.

Fire event when changing route with vue-router before DOM changes?

Revised JSFiddle