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

Question

I'm trying to show a popup confermation when page reload or go outside my website in Vue js. I just have implemented the beforeRouteLeave function in my component, but this works only with when I go to another page in my site, not when I go outside or I reload the page. I just already try window.addEventListener function but the popup appears in all my website. I want to show up this confermation message only in the page of this Vue component

There are some example:

This is in the Vue Component:

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

This is in the Vue Component, but outside the export default :

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

How can i do?

Answer 1

You could do

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;
  }
});

Then in your beforeRouteLeave method you can also check if (confirmExit()) instead of if (answer) .