Laravel+Vue | Do something and prevent back button if certain condition

Question

As we know, in mobile web-browser, if you click back button, the web-app will go to previous page, right?

But what if I want to make a certain condition which will prevent the web-app to go to previous page.

For example, if a SweetAlert2 dialog is popped-up, the back button will close the SweetAlert2 dialog.. but if there is no SweetAlert2 dialog, the back button will go to previous page..

The code I expected is like below:

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
              }
        });
    },
}

score 0 · Answer 1 · answered Sep 19 '19 at 05:29

What you can do is warn the user:

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

or add an event listener like so:

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

Laravel+Vue | Do something and prevent back button if certain condition

1 Answers1