Vue에 페이지를 남겨두기 전에 저장되지 않은 변경 사항을 사용자에게 경고하는 방법

Vue에 페이지를 남겨두기 전에 저장되지 않은 변경 사항을 사용자에게 경고하는 방법

나는 ~을 가지고 있다.UnsavedChangesModal입력 필드에 저장되지 않은 변경사항이 있을 때 사용자가 페이지를 나가려고 할 때 실행되어야 하는 구성요소로서(페이지에 세 개의 입력 필드가 있다).

components: {
    UnsavedChangesModal
},
mounted() {
    window.onbeforeunload = '';
},
methods: {
   alertChanges() {

   }
}

부에루터를 사용한다고 가정할 때(그리고 아마도 사용되어야 할 것임), 그러면 부에루터를 사용하기를 원할 것이다.beforeRouteLeave이 문서에는 이러한 정확한 상황의 예가 수록되어 있다.

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

구성 요소에 직접 추가할 수 있는 기능:

components: { ... },
mounted: { ... }
methods: { ... },
beforeRouteLeave (to, from, next) { ... }

이 답변은 Vue 내에서 항법만 다룬다.사용자가 페이지를 새로 고치거나 다른 사이트로 이동하는 경우, 해당 사이트는 검색되지 않는다.따라서 다음과 같은 것도 필요하다.

window.onbeforeunload = () => (this.unsavedChanges ? true : null);

부에루터 쓰세요?난 항법 요원을 조사하겠지나는 그것들을 염두에 두고 있지만, 아직 내가 직접 사용해 본 적은 없다.자세한 내용은 https://router.vuejs.org/guide/advanced/navigation-guards.html를 참조하십시오.

참조URL: https://stackoverflow.com/questions/45293861/how-do-i-warn-a-user-of-unsaved-changes-before-leaving-a-page-in-vue