Question

我有一个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 Router时，这不起作用。它可以让您向下浏览任意数量的路由器链接。一旦您尝试关闭窗口或导航到 real 链接，就会警告您。

是否可以在Vue应用程序中为普通链接和路由器链接复制onbeforeunload？

Answer 1

将beforeRouteLeave in-component guard与onbeforeunload事件一起使用。

请假护板通常用于防止用户意外保留未保存的修改路线。导航可以取消通过调用next（false）。

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

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

我尚未对此进行测试，MDN说：

在某些浏览器中，调用window.alert（），window.confirm（）和在此事件期间，window.prompt（）可能会被忽略。见HTML 详细说明。

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

1 个答案: