How to call a function before component is destroyed

Question

I am navigating to a route which have a component: Diagnostic

The route looks like

localhost:8080/sav/:id/diagnostic

Whenever the route is visited I send a post request to the backend in order to lock the object which match the :id

I want to send another post request (execute a function) whenever the user navigate somewhere else in order to unlock the object

I used Vue JS lifecycle hooks with BeforeUnmount, unmounted, destroyed :

unmounted() {
  this.unlockObject()
}

I also tried to use watch to execute the function on route changes.

But none worked

I am not sure if the component is even unmounted when I navigate somewhere else in my app.

How to call my function when user navigate somewhere else?

I am using vue2 with vue router

this one was already answered [check this](https://stackoverflow.com/questions/46402809/vuejs-event-on-route-change) — tilon, Jan 14 '21 at 17:04
not working as when an user click somewhere else the component get destroyed and so get the watcher — ermat77, Jan 14 '21 at 17:53

score 2 · Accepted Answer · answered Jan 14 '21 at 18:07

2

Answering my own question

beforeDestroy () {
  this.unlockObject()
}

did the trick...

The function name is case sensitive

answered Jan 14 '21 at 18:07

ermat77

1 Answers1