оповещение о несохраненных изменениях в Vue Js

Question

Я пытаюсь предупредить клиента о несохраненных изменениях в хуке маршрутов beforeRouteLeave (to, from, next) одного из моих Vue компонентов.Я хочу отобразить следующее приглашение при навигации или перезагрузке:

Я пытаюсьиспользовать событие window.onbeforeunload, но оно не срабатывает должным образом:

  beforeRouteLeave (to, from, next) {
    if (!this.changesSaved) {
            const answer = window.onbeforeunload = function(e) {
                return 'Do you really want to leave? you have unsaved changes!';
            };
          if (answer) {
            return next()
          } else {
            return next(false)
          }
    }
    return next()
  }

Что я здесь неправильно делаю синтаксически?

Answer 1

Возможно, вы используете хук beforeRouterLeave в дочернем компоненте вашего компонента маршрута.Таким образом, вы должны напрямую активировать этот хук в компоненте маршрута.

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

Вот ссылка

Answer 2

Это, вероятно, потому что windowunload не используется, так как окно действительно никогда не выгружается ??Я не совсем уверен.Но, судя по тому, как работает Vue, я предполагаю, что именно поэтому.

Так, может, просто используйте подтверждение?

beforeRouteLeave (to, from, next) {
if (!this.changesSaved) {
        const answer = window.confirm = function(e) {
            return 'Do you really want to leave? you have unsaved changes!';
        };
      if (answer) {
        return next()
      } else {
        return next(false)
      }
}
return next()
}