如何在 Vue.js 2 应用程序中模拟 onbeforeunload

发布于06月12日

我有一个Vue组件，它在"脏"时进行跟踪(例如未保存).如果用户有未保存的数据，我想在他们离开当前表单之前警告他们.在典型的web应用程序中，可以使用onbeforeunload.我试着用这种方法:

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

然而，这在使用Vue路由时不起作用.它将让你导航下尽可能多的路由链接，你想.一旦你试图关闭窗口或导航到real链接，它就会警告你.

有没有办法在Vue应用程序中复制onbeforeunload条普通链路和路由链路？

推荐答案

与beforeunload事件一起使用beforeRouteLeave in-component guard.

防护罩通常用于防止使用者意外受伤

在组件定义中，执行以下操作:

beforeRouteLeave (to, from, next) {
  // If the form is dirty and the user did not confirm leave,
  // prevent losing unsaved changes by canceling navigation
  if (this.confirmStayInDirtyForm()){
    next(false)
  } else {
    // Navigate to next view
    next()
  }
},

created() {
  window.addEventListener('beforeunload', this.beforeWindowUnload)
},

beforeDestroy() {
  window.removeEventListener('beforeunload', this.beforeWindowUnload)
},

methods: {
  confirmLeave() {
    return window.confirm('Do you really want to leave? you have unsaved changes!')
  },

  confirmStayInDirtyForm() {
    return this.form_dirty && !this.confirmLeave()
  },

  beforeWindowUnload(e) {
    if (this.confirmStayInDirtyForm()) {
      // Cancel the event
      e.preventDefault()
      // Chrome requires returnValue to be set
      e.returnValue = ''
    }   
  },
},