Router 이동시 navigation error 가 발생하는 경우가 종종 있습니다.
navigation guide 혹은, 다른 라우터 이동중인데 다른 라우터 이동이 발생한다던가 하는 등 실제 서비스 환경에서는 여러가지 상황이 발생합니다.
상황은 여러가지지만 라우터 에러 처리를 위해서 에러를 캐치해야 합니다.
다음과 같이 임의로 에러를 발생시킵니다.
<!-- Home.vue -->
<script lang="ts" setup>
const router = useRouter();
const onClickTriggerRouterError = async () => {
const result = await router.push({name: 'home'});
if (isNavigationFailure(result, NavigationFailureType.duplicated)) {
console.log('dupliccated from = ', result.from);
console.log('dupliccated to = ', result.to);
}
};
</script>
<template>
<div class="home">
<h1>All Destinations</h1>
<div class="destinations">
<button @click="onClickTriggerRouterError">Trigger Router Error</button>
</div>
</div>
</template>
Home.vue에서 home 으로 라우트 이동시키면 router dupllicated 오류가 발생합니다.
router.push 는 정상적인 라우트 이동이 이루어질 경우 undefined 를 반환합니다.(vue 3 버전의 vue-router 4.x )
아무 것도 반환하지 않는 경우도 있습니다 void - (vue 2버전의 vue-router 3.x )
/**
* Programmatically navigate to a new URL by pushing an entry in the history
* stack.
*
* @param to - Route location to navigate to
*/
push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>;
그리고 이동중 오류가 발생할 경우 NavigationFailure Error 객체를 가진 프라미스를 반환합니다. Promise<NavigationFailure>
NavigationFailure 는 to, from 등 라우트 정보를 가지고 있어 오류 추적에 사용할수 있습니다.
/**
* Extended Error that contains extra information regarding a failed navigation.
*/
export declare interface NavigationFailure extends Error {
/**
* Type of the navigation. One of {@link NavigationFailureType}
*/
type: ErrorTypes.NAVIGATION_CANCELLED | ErrorTypes.NAVIGATION_ABORTED | ErrorTypes.NAVIGATION_DUPLICATED;
/**
* Route location we were navigating from
*/
from: RouteLocationNormalized;
/**
* Route location we were navigating to
*/
to: RouteLocationNormalized;
}
isNavigationFailure 함수는 NavigationFailure 객체와 FailureType 을 매개변수로 받습니다.
NavigationFailType 은 abord, cancelled, duplicated 입니다.
첫 번째 vue 파일에서 발생하는 오류는 duplicated 입니다.
/**
* Enumeration with all possible types for navigation failures. Can be passed to
* {@link isNavigationFailure} to check for specific failures.
*/
export declare enum NavigationFailureType {
/**
* An aborted navigation is a navigation that failed because a navigation
* guard returned `false` or called `next(false)`
*/
aborted = 4,
/**
* A cancelled navigation is a navigation that failed because a more recent
* navigation finished started (not necessarily finished).
*/
cancelled = 8,
/**
* A duplicated navigation is a navigation that failed because it was
* initiated while already being at the exact same location.
*/
duplicated = 16
}
'코드 > Nuxt3' 카테고리의 다른 글
[Vue-Router] route match regular expression (0) | 2024.12.22 |
---|---|
[vue-router] router-link 가 한 번만 동작하고 이후 동작하지 않는 경우 (0) | 2024.11.28 |
[Vue] Router History mode & Hash mdode (0) | 2024.11.12 |
[Nuxt3] auto import 설정 (1) | 2024.09.03 |
[Nuxt3] useAsyncData, useFetch (feat, ofetch) (0) | 2024.08.15 |