form 형식에 페이지에서 input 에 입력한 정보들을 저장하지 않고 페이지를 새로고침 하려하거나 다른 페이지로 나가려 할 때 "이 사이트에서 나가시겠습니까?" 라는 window 경고창을 본 적이 있을 것이다.
이를 구현하기 위해서는 window 에서 지원하는 beforeunload 라는 이벤트를 사용하면 된다.
우선 변경사항이 있는지 확인하는 플래그 변수는 isLeaveSite라고 하자 (ture이면 사이트를 종료하겠다는 것)
그리고 mounted 와 beforeUnmount 안에 다음과 같이 beforeunload 이벤트를 등록, 해지하는 코드를 입력한다.
mounted() {
window.addEventListener('beforeunload', this.unLoadEvent);
},
beforeUnmount() {
window.removeEventListener('beforeunload', this.unLoadEvent);
},이벤트 등록할 때 두번째 인자로 unLoadEvent 함수를 넣고 실행하게 하고
unLoadEvent 함수는 다음과 같이 선언해준다.
methods: {
unLoadEvent: function (event) {
if (this.isLeaveSite) return;
event.preventDefault();
event.returnValue = '';
},
}isLeaveSite 가 ture 이면 경고창을 띄우지 않도록 함수를 종료시키고,
그렇지 않을 경우 경고창을 띄워주기 위해 표준에 따라 기본 동작을 방지하기 위해 preventDefault와 Chrome에서 동작하기 위해 returnValue 설정을 한다.
그럼 "이 사이트에서 나가시겠습니까?" 라는 window 경고창을 띄울 수 있다.
