[Vue.js 에러] NavigationDuplicated (부제: 현재 경로에서 새로고침 하고 싶을 때 - router.reload, router.go, currentRoute)

 

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

진행 중인 프로젝트에서 네비게이션바를 이용하고 있는데 현재 페이지에서 또 같은 경로를 클릭하면 이런 에러가 발생한다. (겉으로 보기에는 문제가 없지만 콘솔 열어보면 이런 내용의 에러가 떠있음)

 

NavigationDuplicated: Avoided redundant navigation to current location

이름만 봐도 대충 알 수 있듯이 경로가 같다는 이야기인데, '지금 네가 이미 거기에 있는데, 왜 또 거기로 간다고 하냐?' 대충 이런 느낌이다. 즉, 현재 페이지 주소가 이동하려는 페이지의 주소와 같기 때문에 에러가 났다는 거다. 해결방법은 지금 페이지에서 또 같은 페이지로 안 가면 된다. (엥🤔❓)

---

사실 이 에러는 그냥 네비게이션바 이동할 때는 특별히 문제가 없기 때문에 별로 신경을 쓰지 않고 지나갔다.

그! 런! 데! 내가 이미 /userpage라는 경로에 있는 상태인데 데이터를 새로 받아와서 업데이트 해줄 때가 문제였다.

 

내가 짠 로직을 간단히 이야기 하자면 /userpage에서 다른 유저의 닉네임(또는 프로필사진)을 눌렀을 때 그 유저의 정보를 담은 /userpage로 이동하는거였다.

 

즉, 경로는 /userpage로 같은데 1번 유저 데이터에서 2번 유저의 데이터로 업데이트 해야하는 상황이었다.

그런데 로직을 수행하고 path를 /userpage로 이동하라고 명령하니 '같은 경로인데 어떻게 가요'하는 에러가 뜨면서 움직이질 않았다. 아니, 나는 이 경로에서 새로고침 해야한다고!!!😠(쒸익쒸익)

 

해결 방법은

this.$router.go(this.$router.currentRoute);

이걸 사용하면 된다.

 

대충 router.reload한다는 개념이다. (사실 이 명령어도 따로 존재하는 것 같긴 한데….)

현재 페이지 경로로 가라는 거니까 일종의 새로고침과 같은 역할을 한다고 보면된다.

 

이 방법을 사용해서 /userpage에서 /userpage로 이동하도록 함으로써 다른 유저의 데이터를 새로 받아와 그 데이터를 포함한 페이지로 새로고침한 느낌으로 기능을 성공적으로 완성할 수 있었다.😎👍

 

---

🌷참고 사이트:

https://stackoverflow.com/questions/41301099/do-we-have-router-reload-in-vue-router/41315083#41315083?newreg=cd2f4bc93ff5437b8d40a7c9f25656b3

Do we have router.reload in vue-router?