[javascript] Vue Router의 네비게이션 가드 타입들

18 Dec 2023

javascript

Vue Router를 사용하여 단일 페이지 애플리케이션을 개발하는 경우, 네비게이션 가드(Navigation Guards)를 사용하여 페이지 이동 시 특정 동작을 수행할 수 있습니다. Vue Router에는 다양한 네비게이션 가드 타입이 있으며, 각각의 역할과 사용법에 대해 알아보겠습니다.

1. 전역 네비게이션 가드

전역 네비게이션 가드는 라우팅 전체에서 동작하며, router.beforeEach를 사용하여 설정할 수 있습니다. 모든 라우팅 변경 시 실행됩니다.

예시:

router.beforeEach((to, from, next) => {
  // 네비게이션 로직
  next();
});

2. 라우트별 네비게이션 가드

라우트별 네비게이션 가드는 특정 라우트에만 적용되며, 라우트 객체의 속성으로 설정할 수 있습니다. beforeEnter를 사용하여 정의합니다.

예시:

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        // 네비게이션 로직
        next();
      }
    }
  ]
});

3. 컴포넌트 내 가드

컴포넌트 내 가드는 특정 컴포넌트에 대한 네비게이션 가드로, 해당 컴포넌트 내에 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave를 활용하여 정의할 수 있습니다.

예시:

const User = {
  beforeRouteEnter(to, from, next) {
    // 진입 시 동작
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 업데이트 시 동작
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 떠날 때 동작
    next();
  }
};

Vue Router의 네비게이션 가드를 이용하여 페이지 이동 로직을 세밀하게 제어할 수 있습니다. 각 타입의 가드를 적절히 활용하여 라우팅 기능을 안정적으로 구현할 수 있습니다.

참고 문헌:

Vue Router - Navigation Guards