[Vue.js] 새로고침 / 뒤로가기 방지 및 확인 창 / 사이트를 새로고침하시겠습니까?

 

사용자가 입력하는 화면에서 실수로 뒤로가기/새로고침을 눌렀을 때 

사용자 편의성을 위해 확인창을 한번 실행해준다.

자바스크립트로 하는 방법도 있지만, 나는 Vue.js로 작업하고 있는 페이지여서

Vue.js로 만들었다.

 

 

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

 

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

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

 

 

 

새로고침 시

뒤로가기 시

참고 블로그: https://88240.tistory.com/530