Метод вызывается на других роутерах, Vuejs

Question

У меня есть метод (который определяет, когда вкладка закрыта), который вызывается при создании на компоненте, но если я обращаюсь к другому компоненту, этот метод все еще активен.

created() {
  this.detectTabClose();
},

methods: {
    detectTabClose() {
      const onWindowTabClose = e => {
        var confirmationMessage = "o/";
        (e || window.event).returnValue = confirmationMessage; 
        this.submitBeforeCloseTab();
        return confirmationMessage;
      };
      window.addEventListener("beforeunload", onWindowTabClose);
    },
}

Answer 1

Это происходит потому, что вы настраиваете прослушиватель событий для объекта windows. Поэтому, даже если вкладка исчезла, слушатель все еще там.

Чтобы исправить это, вам нужно «очистить», прежде чем компонент вкладки будет уничтожен.

Также как created есть крюк жизненного цикла для этого beforeDestroy. В этом хуке вы можете использовать removeEventListener, который принимает ту же функцию, что и ввод. Чтобы добиться этого, вы перемещаете функцию в methods (или в другое место), чтобы на нее можно было ссылаться в обоих местах.

created() {
  window.addEventListener('beforeunload', this.onWindowTabClose)
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.onWindowTabClose)
},
methods: {
  onWindowsTabClose(e) {
    ...
  }
}

Альтернативный метод, который использует Vue обработчик событий с $once метод. $once работает как $on, но перестает слушать, когда встречает первое прослушиваемое событие.

created() {
  const onWindowsTabClose = (e) => {
    ...
  }
  window.addEventListener('beforeunload', onWindowTabClose)
  this.$once('hook:beforeDestroy', function () {
    window.removeEventListener('beforeunload', onWindowTabClose)
  })
},

Преимущество этого подхода в том, что ваш код - это одно место. Это упрощает анализ компонентов, когда они начинают расти.

Answer 2

Конечно, он будет активен - вы привязываете его к окну, которое является глобальным для всего, ну, окна.

Чтобы предотвратить такое поведение, вам нужно removeEventListener, когда компонент destroyed.