4

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)

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • 1
    Not a stupid question at all. I was really liking Vue, but I hate that `beforeDestroy` and `destroyed` do not work the way you would expect. From what I read and have been told, the parent has to initiate `beforeDestroy` of a component. So the `beforeDestroy` is not a part of the regular lifecycle. Very stupid, as this works perfectly in React with the use of `componentWillUnmount()`. Thanks for your question as it received an excellent solution. – Pegues Jun 15 '19 at 23:50

1 Answers1

4

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.

Revised JSFiddle

tony19
  • 125,647
  • 18
  • 229
  • 307
Ricky Ruiz
  • 25,455
  • 6
  • 44
  • 53