[Vue.js] Redirected when going from “A url” to “B url” via a navigation guard. 오류 해결방법

메인화면이 A라고 가정했을 때 메인화면에서 B 페이지로 페이지 라우터 push()이용한 화면 전환시 발생한 오류이다.

실행된 스크립트는 다음과 같다.

this.$router.push('/editUser');

[오류 내용]

vue-router.esm.js?8c4f:2065 Uncaught (in promise) Error: Redirected when going from "/main" to "/editUser" via a navigation guard.
    at createRouterError (vue-router.esm.js?8c4f:2065:1)
    at createNavigationRedirectedError (vue-router.esm.js?8c4f:2024:1)
    at eval (vue-router.esm.js?8c4f:2376:1)
    at goNext (index.js?a18c:79:1)
    at eval (index.js?a18c:88:1)

오류 해결방법 방법으로  router-link를 사용하거나 

<router-link :to="{name: 'editUser'}">

$router.push.catch를 사용한다.

this.$router.push({name: 'bPage'}).catch( () => {
	alert('잘못된 접근입니다.')
});

그래도 해결되지 않는 다면 전역 라우터가드(beforeEach)에서 next()가 아닌 다음과 같이 구현해보자.

next({ name: "editUser" });

다음과 같이 코드를 변경해보았으나 동일하게 오류가 발생되었다.

this.$router.push({ path: '/editUser' });

코드는 문제가 없었고 오류는 다른 곳에 있었다. 아래와 같이 next()함수에 url를 던지고 있다면

해당 링크를 잡은 후 next()로 처리하고 그렇지않은 경우 next(url)를 타도록 분기하여 오류를 해결하였다.

next(url);

오류 해결 코드는 다음과 같다.

if(to.path === 'editUser') {
	next();
} else {
	next(url);
}

beforeEach()  부분의 코드를 잘 살펴보면 해결책이 보인다.

[REFERENCE]

• https://stackoverflow.com/questions/62223195/vue-router-uncaught-in-promise-error-redirected-from-login-to-via-a
• https://newbedev.com/vue-router-uncaught-in-promise-error-redirected-from-login-to-via-a-navigation-guard