Vue-Router 업그레이드 로 인 한 Uncaught(in promise)문제 해결

Vue-Router 버 전 을 3.1.0 이상으로 업그레이드 한 후,페이지 는 콘 솔 에서 Uncaught(in promise)문 제 를 보고 합 니 다.

이게 무슨 이유 일 까요?
vue-router 버 전 보기업데이트 로그
V 3.1.0 버 전에 서 추가 기능:push 와 replace 방법 은 promise 를 되 돌려 줍 니 다.콘 솔 에서 캡 처 되 지 않 은 이상 을 볼 수 있 습 니 다.

해결 방법 1:방법 을 호출 할 때 catch 로 이상 을 포착 합 니 다.

this.$router.replace({ name: 'foo' }).catch(err => {
 console.log('all good')
}) 

방법 2:Router 원형 체인 에 있 는 push,replace 방법 을 다시 쓰 면 매번 호출 방법 에 catch 를 추가 하지 않 아 도 됩 니 다.이 방법 은 vue-router 의issues중의 한 사내 가 해결 한 것 이다.

import Router from 'vue-router'
 
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
 if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
 return originalPush.call(this, location).catch(err => err)
}

추가 지식:vue-router 는$router.push()를 사용 하여 페이지 를 걸 고 debug 모드 에 들 어가 서 Uncaught(in promise)undefined 를 알려 줍 니 다.
문제.
vue-router 에서$router.push()를 사용 하여 페이지 를 돌 릴 때 페이지 가 걸 려 서 debug 모드 에 들 어가 면"Uncaught(in promise)undefined"를 알 리 고 정지점 으로 들 어 갑 니 다.

function (err) {
   if (onAbort) {
    onAbort(err);
   }
   ……
}

이 방법

분석()
Uncaught(in promise)undefined,캡 처 되 지 않 은 promise,프로그램 이 실제로 오류 가 발생 하지 않 았 기 때 문 입 니 다.이것 은 내 비게 이 션($router.push)일 뿐,beforenter 갈고리 에서 방향 을 바 꾸 기(next('/foo')를 생 성 합 니 다.
Vue-router>=3.1.0 버 전 은 push 와 replace 를 사용 하여 점프 할 때 콘 솔 에 이상 이 발생 합 니 다.그 주요 원인 은 vue-router 3.1.0 버 전 이후 router.push('/path')가 promise 로 돌 아 왔 을 때 오류 가 발생 합 니 다.이전 버 전 은 vue-router 가 오류 정 보 를 되 돌려 주지 않 았 기 때 문 입 니 다.그래서 우 리 는 이상 이 존재 하지 않 는 것 이 아니 라 이상 을 잡 을 수 없 었 다.그 러 니까 우리 가 해 야 할 일 은
해결 하 다.
1.$push 대신 route-link to bar 사용

  <router-link to="/settlement_manage/account">
    <el-button :disabled="loading" size="mini" type="warning">
          
    </el-button>
  </router-link>

2.모든 호출 에 push 업데이트:

  this.$router.push({
    path: '/settlement_manage/account',
  }, () => {});

3.사용 시 오류 차단
router.push('/path').catch(err => {})
4.명시 적 으로 onComplete 와 onAbort 반전 함 수 를 지정 합 니 다.

this.$router.push({
    path: `/settlement_manage/account`
   },
   onComplete => {
    console.log('  ')
   },
   onAbort => {
    console.log('    ')
   })

5.router 를 도입 하기 전에 push 방법 을 다시 쓰 고 router.js 에 추가 합 니 다.

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
 if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
 return originalPush.call(this, location).catch(err => err)
}

ok！이상 모든 방법 은 직접 측정 하면 효과 가 있 습 니 다~
Vue-Router 업그레이드 로 인 한 Uncaught(in promise)문 제 를 해결 하 는 이번 편 은 바로 편집장 님 께 서 여러분 께 공유 해 주신 모든 내용 입 니 다.참고 해 주시 고 많은 응원 부 탁 드 리 겠 습 니 다.