How can I mimic onbeforeunload in a Vue.js 2 application?

问题

I have a Vue component that is tracking when it is "dirty" (e.g. unsaved). I would like to warn the user before they browse away from the current form if they have unsaved data. In a typical web application you could use onbeforeunload. I've attempted to use it in mounted like this:

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

However this doesn't work when using Vue Router. It will let you navigate down as many router links as you would like. As soon as you try to close the window or navigate to a real link, it will warn you.

Is there a way to replicate onbeforeunload in a Vue application for normal links as well as router links?

回答1:

Use the beforeRouteLeave in-component guard along with the onbeforeunload event.

The leave guard is usually used to prevent the user from accidentally leaving the route with unsaved edits. The navigation can be canceled by calling next(false).

In your component definition do the following:

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!')
  }, 
},

I have not tested this and MDN says:

In some browsers, calls to window.alert(), window.confirm(), and window.prompt() may be ignored during this event. See the HTML specification for more details.

来源：https://stackoverflow.com/questions/56550164/how-can-i-mimic-onbeforeunload-in-a-vue-js-2-application

标签

javascript

Vue.js

vuejs2

vue-router