The

project uses vue+element, and the requirement is to prompt "whether the page is not saved or not to leave" before leaving the page when there is content being edited on the page.

I have found two solutions so far, but neither is perfect:

first:
examples of using vueRouter"s official website directly

       beforeRouteLeave (to, from , next) {
          const answer = window.confirm("Do you really want to leave? you have unsaved changes!")
          if (answer) {
            next()
          } else {
            next(false)
          }
        }
      

the effect is as follows:

:
beforeRouteLeave

---

:

The style of this method can be controlled, but the problem remains the same: not only does it not pop up when the browser is closed and refreshed, but the pop-up box flashes when you click on the browser back event. no, no, no.

actually, I saw something useful on the Internet:

 //beforeunload
window.onbeforeunload = function (event) {
    event = event || window.event;
    event.returnValue = "";
}

but this feeling is not what I want, do you have any solution, if you can put the second kind, click on the browser to flash back to fix this problem, the second kind can barely be used. no, no, no. Thank you