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