在 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) 。