vue 브라우저 원본 복귀 단추 감청, 루트 점프 작업

1661 단어 vue감청브라우저버튼라우팅 점프
오늘 테스트에서 브라우저 반환 페이지를 누르면 데이터가 틀렸다고 버그를 보냈습니다. 브라우저의 반환 단추를 감청하고 기본 이벤트를 막아야 하는 이유를 한참 동안 조사했습니다.
구체적인 작업 방법은 다음과 같다.
1. 마운트가 완료되면 브라우저가 팝스테이트를 지원하는지 판단합니다

mounted(){
   if (window.history && window.history.pushState) {
  history.pushState(null, null, document.URL);
  window.addEventListener('popstate', this.cancel, false);
 }
 },
2. 페이지를 삭제할 때 감청을 취소합니다.그렇지 않으면 다른 vue 루트 페이지도 감청됩니다.

 destroyed(){
 window.removeEventListener('popstate', this.cancel, false);
 }
3. 감청 조작을 methods에 쓰고 remove Event Listener가 감청 내용을 취소하려면 감청을 켜는 것과 일치해야 하기 때문에 함수는 methods에 가져가서 쓴다

 cancel: function() {
   if(this.orderId){
     this.$router.push({
      name:"orderList",
      params: {id:this.orderId},
        });
   }else{
   this.$router.go(-1);
   }
  },
보충 지식: vue-router 구성 요소 내 내비게이션 수위 판단 복귀 단추
구성 요소 내 내비게이션 수위가 $router를 차단할 수 없습니다.go(-1) 또는 물리적으로 되돌아오는 단추를 누르면 차단 함수 밖에서 setTimeout을 감싸면 됩니다.구체적인 원인은 아직 발견되지 않았다.

 setTimeout(() => {
  this.$confirm(' ， ？', ' ', {
   confirmButtonText: ' ',
   cancelButtonText: ' ',
   type: 'warning'
  }).then(() => {
   next()
   return
  }).catch(() => {
   this.$message({
    type: 'info',
    message: ' '
   })
   next(false)
   return
  })
 }, 500)
상기 vue 감청 브라우저 원생 복귀 단추, 루트 점프 조작은 바로 편집자가 모두에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주십시오.
[SWEA] 1233.사칙연산 유효성 검사(d4)
SQL 심화...

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage