在Vue Js中关闭选项卡时显示弹出窗口

Question

我正在尝试在页面重新加载或在 Vue js 中离开我的网站时显示弹出窗口。 我刚刚在我的组件中实现了beforeRouteLeave 函数，但这仅适用于我转到站点中的另一个页面时，而不是当我外出或重新加载页面时。我刚刚尝试了window.addEventListener 功能，但弹出窗口出现在我的所有网站中。 我只想在这个 Vue 组件的页面中显示这个确认消息

有一些例子：

这是在 Vue 组件中：

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Confermation Message')
  if (answer) {
    next()
  } else {
    next(false)
  }
},

这是在 Vue 组件中，但在 export default 之外：

window.addEventListener('beforeunload', (event) => {
  if (logic) {
    event.returnValue = 'Sei sicuro di uscire? Le modifiche non salvate andranno perse'
  }
})

我该怎么办？

Answer 1

你可以的

const confirmExit = () => window.confirm('Sei sicuro di uscire? Le modifiche non salvate andranno perse')

window.addEventListener('beforeunload', evt => {
  if (!confirmExit()) {
    evt.preventDefault();
    evt.returnValue = true;
  }
});

然后在您的beforeRouteLeave 方法中，您还可以检查if (confirmExit()) 而不是if (answer)。