코드/Nuxt3

[Vue-Router] isNavigationFailure, NavigationFailureType

Yeah-Panda 2024. 12. 22. 16:43

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
}