Vue Router에서 라우트 변경 이벤트를 감지하고 처리하는 방법에 대해 알아보겠습니다.

라우터 이벤트 감지

Vue Router는 beforeEach 메서드를 사용하여 라우트 변경 이벤트를 감지할 수 있습니다. 이 메서드는 전역 수준에서 라우터 변경 이벤트를 가로채는 역할을 합니다.

const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  // 이곳에서 라우트 변경 이벤트 처리
  next(); // 다음 단계로 진행
});

위의 예제에서 beforeEach 메서드 내부에서 to와 from은 각각 이동할 라우트와 현재 라우트를 나타냅니다. 그리고 next 메서드를 호출하여 다음 단계로 진행합니다.

예제

다음은 간단한 예제입니다. /login 페이지로 이동할 때 사용자의 로그인 여부를 확인하고, 로그인하지 않은 경우 로그인 페이지로 리다이렉트하는 기능을 구현한 것입니다.

router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

결론

Vue Router의 beforeEach 메서드를 사용하면 라우트 변경 이벤트를 가로채고 처리할 수 있습니다. 이를 통해 권한 부여, 로그 분석 등 다양한 작업을 수행할 수 있습니다.

이상으로 Vue Router에서 라우트 이벤트를 감지하는 방법에 대해 알아보았습니다. 감사합니다.

참고 문헌:

• Vue Router 공식 문서