removeEventListener when change route Vuejs

Question

When I mount the page I add an eventListner and if the user want to change the route I want to remove it. But in my case after I change the route that event is still available and if I close the tab I still get an alert.

  mounted: function () {
    window.addEventListener("beforeunload", this.detectTabClose);
  },

  beforeRouteLeave(to, from, next) {
    //gets here and the route is changed, but this event is not removed
    window.removeEventListener("beforeunload", this.detectTabClose, true);
    next();
  },

detectTabClose(e) {
    var confirmationMessage = "o/";
    (e || window.event).returnValue = confirmationMessage;
    return confirmationMessage;
},

Answer 1

You can remove the event listener on beforeDestroy hooks

beforeDestroy() {
   window.removeEventListener("beforeunload", this.detectTabClose);
},