Vue.js 환경에서 페이지 이탈 방지 팝업 구현하기

문제 상황

• Vue.js 기반 SPA 가입 과정에서 실수로 페이지를 벗어나 입력 정보가 유실되는 문제
• 페이지 이탈 시 확인 팝업이 필요했지만 브라우저 이벤트마다 제약이 달라 대응이 어려움

원인 분석

• beforeunload는 사용자 제스처가 없으면 동작하지 않고, SPA 라우터 이동에는 제한적
• 브라우저 기본 confirm만 사용 가능해 문구 변경과 UI 확장이 어려움
• 일부 브라우저에서 지원이 불완전해 동일한 방식으로는 일관된 대응이 어려움

해결 방법

• Vue.js의 onBeforeRouteLeave로 라우터 이동 시 이탈 확인 팝업 구현
• window.confirm으로 사용자 확인을 받고 next(confirm)로 이동 여부 제어
• beforeunload와 onBeforeRouteLeave를 조합해 도메인 이동과 라우터 이동을 모두 커버

적용해볼 점

• 이탈 방지 기능은 이동 경로별 제약을 먼저 확인한 뒤 설계
• SPA 내부 이동과 외부 도메인 이동을 분리해 대응
• 사용자 안내 문구와 확인 UI를 서비스 상황에 맞게 조정