[동일 라우터 중복 요청에러] NavigationDuplicated: Avoided redundant navigation to current location

참고

https://yeongseungjeong.tistory.com/48

https://stackoverflow.com/questions/57837758/navigationduplicated-navigating-to-current-location-search-is-not-allowed

 

에러

대충 이런 에러가 뜬다...

진행중인 프로젝트에서 라우터를 이용해 네비게이션바 클릭시 경로 변경을 시키고 있는데 이런 에러가 뜬다.

 

NavigationDuplicated: Avoided redundant navigation to current location

이름만 봐도 알 수 있듯이 경로가 겹친다는 이야기인데, '지금 니가 이미 거기에 있는데 왜 또 거기로 가려고 하냐?' 대충 이런 느낌이다. 즉, 현재 페이지 주소가 이동하려는 페이지의 주소와 같기 때문에 에러가 났다는 거다.

 

원인

현재 경로에서 다른 경로로 이동할땐 문제가 없는데, 같은 페이지로 router.push('path') 하게 될 때 발생했다.

찾아보니 $router.push()의 에러핸들링을 안해줘서 찍히는 에러였다.

 

해결

catch문으로 에러를 잡아주니 해결됐다.

사실 해결방법이 다양했는데 그중에서도 코드를 짧게 쓰면서 간편하게 해결할 수 있는 방법인 예외처리를 하기로 했다.

기존 코드에서 .catch(() => {}) 만 추가해줬다.

이제 동일한 네비게이션바 클릭시에도 에러가 발생하지 않는다!!🤗