[Vuejs]-(vue router) disabling browser back and forward arrows, with warning

by

1👍

You could use a global navigation guard to check if the user is navigating to a recognised route or not, and prompt for confirmation before navigating away.

Something like:

router.beforeEach((to, from) => {
  const route = this.$router.resolve(to)

  if (route.resolved.matched.length) {
    // the route exists, return true to proceed with the navigation
    return true
  }else{
     //the route does not exists, prompt for confirmation
    return confirm("Are you sure you want to leave this site?")
  }
})
👤Ninowis

0👍

In turns out the solution is outside Vue/VueRouter:

window.addEventListener('beforeunload', function (e) {
    e.preventDefault();
    e.returnValue = '';
});

Now the Vue-specific navigation is not recorded by the browser, and clicking the Back arrow displays the browser’s built-in message.

👤greg

Leave a comment