Laravel + Vue |Сделайте что-нибудь и предотвратите кнопку возврата, если определенное условие

Question

Как мы знаем, в мобильном веб-браузере, если вы нажмете кнопку "Назад", веб-приложение перейдет на предыдущую страницу, верно?

Но что, если я захочу выполнить определенное условие, которое будет препятствоватьвеб-приложение для перехода на предыдущую страницу.

Например, если всплыло диалоговое окно SweetAlert2 , кнопка «Назад» закроет диалоговое окно SweetAlert2 ... но если SweetAlert2 отсутствуетВ диалоговом окне кнопка «Назад» перейдет на предыдущую страницу.

Код, который я ожидал, выглядит следующим образом:

export default {
    mounted() {
        document.addEventListener("backbutton", function(){
              if(is_swal_open){
                  close_swal_dialog();
                  return false; // NOTE: i expected this should prevent from go to previous page
              }
        });
    },
}

Answer 1

Что вы можете сделать, это предупредить пользователя:

if(is_swal_open)
{
    window.onbeforeunload = function() { return "Your warning here."; };
}

или добавить прослушиватель событий, например, так:

window.addEventListener('beforeunload', function (e) {
  if(is_swal_open)
  {
      // Cancel the event
      e.preventDefault();
      // Chrome requires returnValue to be set
      e.returnValue = '';
  }
});