브라우저 사이트 이탈 감지하기

window에서 지원하는 beforeunload 이벤트인데요. document가 언로드되기 전에 호출되는 이벤트입니다.

beforeunload 이벤트는 구체적으로 다음과 같은 상황에서 발생합니다.

• 사이트 창을 닫으려고 할 때
• 다른 주소로 이동하려고 할 때
• 같은 주소여도 새로고침하려고 할 때(이 때는 Reload site? 문구가 뜹니다)

이제 코드를 작성해 봅시다.

여기서 Input을 감지하기 위해 v-model과 watch로 값의 변화를 감지하고 canLeaveSite라는 boolean 값으로 결정하도록 합니다.

그리고 vue의 라이프 사이클 주기 중에서 mounted될 때와 beforeUnmount될 때 이벤트를 등록하고 해지시키도록 합니다.

  mounted() {
    window.addEventListener('beforeunload', this.unLoadEvent);
  },
  beforeUnmount() {
    window.removeEventListener('beforeunload', this.unLoadEvent);
  },

이벤트를 등록할 때 아래 unLoadEvent를 두 번째 인자로 넣어 실행되게 합니다. input이 변경되지 않은 경우에는 early return하여 경고창이 뜨지 않습니다.

표준에 따라 기본 동작을 방지하기 위해 preventDefault를, Chrome에서 동작하기 위해 returnValue 설정을 합니다.

methods: {
    unLoadEvent: function (event) {
      if (this.canLeaveSite) return;

      event.preventDefault();
      event.returnValue = '';
    },
}

 

 

https://egg-programmer.tistory.com/290