Vue Router의 내비게이션 가드(Navigation Guards)는 무엇이며, 어떤 종류(전역, 라우트별, 컴포넌트 내)가 있고 각각 어떤 시점에 호출되는지 설명하고 실제 애플리케이션에서 활용 사례를 들어주세요.

Vue Router의 내비게이션 가드는 라우트 이동 과정에서 특정 시점에 실행되는 함수입니다. 라우트 접근을 제어하거나, 데이터를 미리 로딩하는 등의 작업을 수행할 수 있습니다.

종류는 크게 세 가지가 있습니다.

• 전역 가드: router.beforeEach, router.afterEach 등으로 정의하며, 모든 라우트 이동에 대해 실행됩니다. 인증 상태 확인 등에 유용합니다.
• 라우트별 가드: 라우트 설정 내에 beforeEnter를 사용하여 정의하며, 해당 라우트에 진입할 때만 실행됩니다. 특정 라우트에 대한 권한 검사에 적합합니다.
• 컴포넌트 내 가드: 컴포넌트 내에 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 등으로 정의하며, 해당 컴포넌트가 라우트에 의해 렌더링될 때 실행됩니다. 컴포넌트와 관련된 데이터 로딩이나 정리 작업에 활용됩니다.

예를 들어, beforeEach를 사용하여 모든 페이지에 접근하기 전에 사용자의 로그인 여부를 확인하고, 로그인되지 않았다면 로그인 페이지로 리다이렉트하는 기능을 구현할 수 있습니다. 라우트 메타 정보(meta fields)를 활용하여 특정 라우트에만 적용되는 가드를 만들 수도 있습니다.