Как я могу имитировать onbeforeunload в приложении Vue.js 2? - PullRequest
Новая
       27

Как я могу имитировать onbeforeunload в приложении Vue.js 2?

1 голос
/ 11 июня 2019

У меня есть компонент Vue, который отслеживает, когда он «грязный» (например, несохраненный). Я хотел бы предупредить пользователя, прежде чем он откажется от текущей формы, если у него есть несохраненные данные. В типичном веб-приложении вы можете использовать onbeforeunload. Я попытался использовать его в смонтированном виде так: 

mounted: function(){
  window.onbeforeunload = function() {
    return self.form_dirty ? "If you leave this page you will lose your unsaved changes." : null;
  }
}

Однако это не работает при использовании Vue Router. Это позволит вам перемещаться по тем ссылкам маршрутизатора, которые вы хотите. Как только вы попытаетесь закрыть окно или перейти к ссылке real , он предупредит вас.

Есть ли способ реплицировать onbeforeunload в приложении Vue для обычных и маршрутизаторских ссылок?

1 Ответ

0 голосов
/ 12 июня 2019

Используйте beforeRouteLeave внутрикомпонентную защиту вместе с событием onbeforeunload.

Защитный кожух обычно используется для предотвращения случайного попадания пользователя оставив маршрут с несохраненными правками. Навигация может быть отменена позвонив далее (ложь).

В определении вашего компонента сделайте следующее: 

beforeRouteLeave (to, from, next) {
  // If the form is not dirty or the user confirmed they want to lose unsaved changes,
  // continue to next view
  if (!this.form_dirty || this.confirmLeave()){
    next()
  } else {
    // Cancel navigation
    next(false)
  }
},

created() {
  window.addEventListener('beforeunload', this.onBeforeUnload)
},

beforeDestroy() {
  window.removeEventListener('beforeunload', this.onBeforeUnload)
},

methods: {
  onBeforeUnload(e) {
    if (this.form_dirty && !this.confirmLeave()) {
      // Cancel the event
      e.preventDefault()
      // Chrome requires returnValue to be set
      e.returnValue = ''
    }   
  },

  confirmLeave() {
    return window.confirm('Do you really want to leave? you have unsaved changes!')
  }, 
},

Я не проверял это и MDN говорит:

В некоторых браузерах вызовы window.alert (), window.confirm () и window.prompt () может игнорироваться во время этого события. Смотрите HTML спецификация для более подробной информации.

...