[vue-router] 네비게이션가드(Navigation Guards) 프로미스 에러

뷰로 개발을 하다 보면 페이지를 이탈 시 confirm을 통해 확인을 체크하는 로직을 구현하게 된다.

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

그런데 콘솔 에러에 promise 에러라고만 뜬다. 에러가 난 구간을 확인해보니 onAbort에서 에러가 발생했다.

무슨 일이지?

 

검색을 통해서 답을 찾았다.

https://github.com/vuejs/vue-router/issues/2873#issuecomment-519274203

 

결로부터 말하면 아래 처럼 router 주소를 변경하는 지점에 catch문을 사용해주면 된다. 

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

더 자세한 내용은 아래에서 확인하자.

https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378

replace, push 반환 값이 promise라고 한다. 그래서 실패할 경우 catch로 에러 처리를 해주지 않으면 위와 같은 문제가 발생하는 것이다.