NavigationDuplicated Avoided navigation to current location - vue router 에러

이슈

NavigationDuplicated: Avoided navigation to current location: “abc”

Tabs 컴포넌트로 페이지 이동을 하는데 이런 에러를 만났습니다. 탭을 빠르게 왔다갔다 하면 생겼는데요. vue router에서 현재 페이지와 같은 path로 this.$router.push(path)를 하면 발생합니다. 현재 페이지에서 같은 경로의 페이지로 이동할 수 없기 때문입니다.

해결방법

해결방법은 여러가지가 있습니다.

1. 에러 메시지를 무시하기

catch문으로 에러를 잡아버리는 방법입니다. 근본적인 해결책이라고는 볼 수 없습니다. 다른 에러도 같이 무시되기 때문입니다. 단순히 에러메시지를 보기 싫다면 적용할 수 있는 방법입니다.

this.$router.push.catch(() => {})

2. 경로 비교하기

$router.push하기 전에 경로를 비교합니다. 근본적인 원인을 없앨 수 있습니다.

const currentPath = this.$route.path
const targetPath = 'path'
if (currentPath !== targetPath) this.$router.push(targetPath)

3. this.$router.replace 사용

push 방식과 동작 방식이 다르긴 하지만 옵션이 될 수 있습니다.

this.$router.replace(path)

this.$router.push

1. 히스토리에 새 항목이 추가됩니다.
2. 브라우저의 뒤로 가기 버튼을 사용할 수 있습니다.
3. 일반적인 네비게이션 용도로 사용됩니다.

this.$router.replace

1. 히스토리의 현재 항목이 새로운 경로로 대체됩니다.
2. 브라우저의 뒤로가기 버튼을 사용할 수 없습니다.
3. 로그인 후 리디렉션, 오류 페이지로 리디렉션 등의 상황에서 사용됩니다.

참고

• https://im-designloper.tistory.com/71
• https://stackoverflow.com/questions/57837758/navigationduplicated-navigating-to-current-location-search-is-not-allowed
• https://github.com/vuejs/vue-router/issues/2872