javascript - 警告 Vue Js 中未保存的更改

Question

我试图提醒客户端我的一个 Vue 组件的 beforeRouteLeave (to, from, next) 路由 Hook 中未保存的更改。我想在导航或重新加载时显示以下提示:

我正在尝试使用 window.onbeforeunload 事件，但未正确触发:

  beforeRouteLeave (to, from, next) {
    if (!this.changesSaved) {
            const answer = window.onbeforeunload = function(e) {
                return 'Do you really want to leave? you have unsaved changes!';
            };
          if (answer) {
            return next()
          } else {
            return next(false)
          }
    }
    return next()
  }

我在语法上做错了什么？

Answer 1

这可能是因为没有使用 windowunload，因为窗口从未真正卸载过？我不确定。但从 Vue 的工作方式来看，我认为这就是原因。

所以也许只使用确认？

beforeRouteLeave (to, from, next) {
if (!this.changesSaved) {
        const answer = window.confirm = function(e) {
            return 'Do you really want to leave? you have unsaved changes!';
        };
      if (answer) {
        return next()
      } else {
        return next(false)
      }
}
return next()
}