Vue 브라우저가 닫히면 닫을지 묻는 메시지가 표시됩니다.

단일 페이지 애플리케이션이 점점 대중화되면서 주류 프런트엔드 프레임워크인 Vue가 널리 사용되었습니다. 그러나 애플리케이션에서 브라우저가 닫힐 때 프롬프트를 구현하는 것은 더 어려운 문제입니다.

일반적으로 브라우저를 닫을 때 사용자가 실수로 브라우저를 조작하거나 모든 브라우저 탭을 닫을 가능성이 높습니다. 이때, 저장하지 않은 데이터나 애플리케이션에서 정리해야 할 기타 데이터가 있는 경우 몇 가지 문제가 발생할 수 있습니다.

이 문제를 해결하려면 Vue 애플리케이션에 프롬프트 레이어를 추가해야 합니다. 사용자가 브라우저 탭을 닫으려고 하면 닫을 것인지 묻는 프롬프트가 표시됩니다.

Vue는 브라우저가 닫히거나 페이지가 새로 고쳐질 때 트리거되는 언로드 전 브라우저 닫기 이벤트를 제공합니다. Vue의 라이프 사이클 함수에서 페이지의 beforeunload 이벤트를 수신할 수 있습니다.

created() {
  window.addEventListener('beforeunload', this.handleBeforeunload)
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeunload)
},
methods: {
  handleBeforeunload(event) {
    event.returnValue = '您确定要关闭该页面吗？'
  }
}

위 코드에서는 생성된 함수에서 이벤트 수신을 추가합니다. 브라우저가 페이지를 닫거나 새로 고치면 handlerBeforeunload 함수가 트리거됩니다. 이 함수에서는 event.returnValue를 사용하여 애플리케이션이 닫힐 때 프롬프트를 구현하기 위한 프롬프트 정보를 반환합니다.

Vue 애플리케이션이 다른 JS 스크립트와 함께 브라우저 닫기 이벤트를 제어하는 ​​경우 충돌이 발생할 수 있다는 점에 유의해야 합니다. 이때 더 나은 해결책은 vue-router Guard를 사용하여 라우팅 프롬프트를 보다 자세히 제어하는 ​​것입니다.

vue-router에서는 경로가 떠나기 전에 트리거되는 beforeRouteLeave 가드를 사용할 수 있습니다. 현재 경로와 대상 경로가 일치하는지, 사용자가 특정 작업을 수행했는지 여부에 따라 프롬프트 여부를 결정할 수 있습니다.

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您确定要离开该页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

위 코드에서는 먼저 저장되지 않은 데이터(예: formDirty 변수)가 있는지 확인하고, 그렇다면 프롬프트 상자가 표시되고 사용자는 사용자의 선택에 따라 현재 페이지를 떠날지 여부를 결정합니다. 존재하지 않는 경우 다음 경로로 바로 이동합니다.

간단히 말하면 Vue 애플리케이션에서 beforeunload를 사용하든 vue-router에서 beforeRouteLeave를 사용하든 간단한 코드를 통해 브라우저를 닫을 때 프롬프트를 구현할 수 있어 데이터 손실이나 기타 문제를 피하면서 경험을 향상시킬 수 있습니다.

위 내용은 Vue 브라우저가 닫히면 닫을지 묻는 메시지가 표시됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!