[Error] Uncaught (in promise) NavigationDuplicated 에러 해결하기

에러

프로젝트 라우터 이동시 콘솔에 다음과같은 에러가 발생했다.

 

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/test".

 

 

이는 같은 라우터로 router.push('path')를 하게될때 발생한다.

위의 경우는 /test 링크에서 /test로 이동하려 할때 발생하는 에러이다.

 

 

 

해결방법 1

$router.push()의 에러 예외처리가 되지 않아 기본으로 콘솔에 에러가 찍힌다.

catch문으로 위 에러를 잡아주는 방법이 있다.

this.$router.push('/')

에서

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

로 catch만 추가해주면된다.

하지만 이방법으로 하면 $router.push()가 사용되는 코드 전부 catch문을 붙여 예외처리를 해줘야한다.

때문에 나는 해결방법 2로 에러를 개선했다.

 

 

해결방법 2

router/index.js 파일에서 아래와 같이 수정해주면 다른 파일들에서 $router.push를 사용할 때 catch를 붙여주지 않아도 되므로 코드 중복이 제거되는 장점이 있다.

src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
... 생략

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => {
		if (err.name !== 'NavigationDuplicated') throw err;
	});
};

export default router;

 

 

1번 방법은 에러를 전부 무시하는 코드지만, 2번방법은 NavigationDuplicated 에러만 무시하는 코드이다.