Vue Router는 Vue.js 애플리케이션을 위한 공식 라우터 라이브러리로, 화면 간의 이동 및 URL 기반의 네비게이션을 지원합니다.

이 라우터의 콜백 함수는 특정 경로로 이동할 때 실행될 함수를 정의할 수 있게 해줍니다. 예를 들어, 특정 경로로 이동할 때마다 데이터를 불러오거나 인증 절차를 거칠 수 있습니다.

전역 수준의 전/후훅

Vue Router는 글로벌 수준에서 라우터 네비게이션 이벤트에 응답하는 전/후훅 함수를 제공합니다. beforeEach, beforeResolve, afterEach와 같은 메소드를 사용하여 전역 수준에서 라우터 네비게이션 이벤트에 대한 로직을 추가할 수 있습니다.

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

router.beforeEach((to, from, next) => {
  // 네비게이션 이전에 실행될 로직
  next(); // 이 메소드를 호출하여 네비게이션 계속 진행
});

router.afterEach((to, from) => {
  // 네비게이션이 완전히 완료된 후에 실행될 로직
});

라우트별 가드

특정 라우트에 대한 커스텀 가드 함수를 등록하여, 그 라우트로의 이동 전후에 로직을 수행할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 이동 전에 실행될 로직
        next(); // 이 메소드를 호출하여 네비게이션 계속 진행
      }
    }
  ]
});

참고 자료

Vue Router 공식 문서: Vue Router - 공식 문서

위 내용을 바탕으로, Vue Router의 콜백 함수 등록 방법에 대해 간략히 살펴보았습니다. 전역 수준의 전/후훅 함수와 라우트별 가드 함수를 이용하여 애플리케이션 내부의 네비게이션 이벤트에 로직을 추가할 수 있습니다.