警告Vue Js中未保存的更改

Question

我正在尝试向客户端提醒我beforeRouteLeave (to, from, next)某个组件的Vue路由挂钩中未保存的更改。我想在导航或重新加载时显示以下提示：

我正在尝试使用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()
}

Answer 2

可能在路由组件的子组件中使用beforeRouterLeave挂钩。因此，您必须直接在路径组件中触发该挂钩。

  

最后，您可以使用以下选项直接在路径组件（传递给路由器配置）中定义路径导航保护......

这是the reference