[Vue.js] Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: 에러해결

 

vue를 개발하던 중 이런 에러가 떴다.

검색해보니 해당 오류는 같은 컴포넌트를 한 번 더 호출해서 이미 해당 경로인데 우케 또 일루가냐~~ 라는 에러라고한다.

 

하지만 가야합니다

 

원래는 코드는 router-link로 html에서 꽂았는데 여기선 해결방법이 없어보여서 함수로 뺐다.

<router-link :to="{ name: 'repositoryFile',
        params: {reponame: `${el.name}`} }">

 

<해결코드>

1. 클릭하는 html 요소에 해당 함수를 박는다.

@click="repoCheck(el.name)" @keyup="repoCheck(el.name)"

2. el.name 요소를 전달받은 repoCheck 메소드는 router에 push를 하는 동시에 에러가 나는 것을 catch하여 무시하기로 한다!

  methods: {
    repoCheck(rn) {
      this.$router.push({ name: 'repositoryFile', params: { reponame: rn } }).catch(() => {});
    },