Vue가 페이지를 닫기 전에 요청 보내기

Vue.js로 웹 애플리케이션을 구축할 때 상태를 정리하거나 마지막 요청을 보내기 위해 일부 작업을 수행해야 하는 경우가 많습니다. 시나리오 중 하나는 사용자가 페이지를 닫을 때 현재 상태를 저장하라는 요청을 보내거나 데이터가 손실되지 않도록 일부 정리 작업을 수행해야 한다는 것입니다.

기존 웹사이트에서는 window.onbeforeunload 이벤트에서 일부 작업을 수행할 수 있습니다. 그러나 Vue.js에서 페이지 탐색을 위해 Vue Router를 사용하면 페이지가 닫힐 때 Vue Router의 탐색 후크만 트리거되고 window.onbeforeunload 이벤트는 트리거되지 않습니다. 그렇다면 페이지를 닫기 전에 요청을 보내는 방법은 무엇입니까?

Vue.js에서는 글로벌 프론트가드를 등록하여 경로안내를 들을 수 있습니다. 전역 프론트 가드는 라우팅 탐색 전에 호출되는 함수로, 세 가지 매개변수를 받아들일 수 있습니다: to(들어가려는 대상 라우팅 개체), from(현재 탐색이 곧 떠나려는 라우팅 개체), next(호출) 이 방법을 입력하면) 다음 후크).

사용자가 현재 페이지를 떠날 때 실행되는 후크 기능을 전역 프론트 가드에 등록할 수 있습니다. 후크 기능에서 요청을 보내고 필요한 작업을 수행할 수 있습니다. 다음은 샘플 코드입니다.

// main.js
import Vue from 'vue';
import App from './App';
import router from './router';

router.beforeEach((to, from, next) => {
  const answer = window.confirm("确定要关闭页面吗？");
  if (answer) {
    // 发送请求并执行清理操作
    // do something...
    next();
  } else {
    next(false);
  }
});

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

위 코드 샘플에서는 전역 프론트 가드를 등록하고 여기에 후크 기능을 정의했습니다. 이 후크 기능은 사용자가 현재 페이지를 떠날 때 트리거됩니다. 우리는 사용자에게 페이지를 닫을 것인지 묻는 확인 상자를 후크 기능에 표시합니다. 사용자가 페이지를 닫고 싶다고 확인하면 요청을 보내고 정리 작업을 수행합니다. 그렇지 않으면 탐색을 취소하고 현재 페이지에 머물러 있습니다.

다음 Hook에 진입하기 위해 Hook 함수의 next() 메소드를 사용한다는 점에 유의하세요. next() 메서드를 호출하지 않으면 탐색이 중단되고 현재 페이지에 유지됩니다.

요약하자면, Vue Router의 글로벌 프론트가드에 Hook 함수를 등록하면 페이지 닫기 이벤트를 들을 수 있습니다. 후크 기능 내에서 요청을 보내고 필요한 작업을 수행할 수 있습니다. 이렇게 하면 사용자가 페이지를 닫을 때 데이터가 손실되지 않는 동시에 필요한 정리 작업도 수행할 수 있습니다.

위 내용은 Vue가 페이지를 닫기 전에 요청 보내기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!