Vue Router는 Vue.js 애플리케이션의 네비게이션을 관리하기 위한 공식 라우팅 라이브러리입니다. Vue Router를 사용하면 SPA(Single Page Application)의 라우팅을 쉽게 관리할 수 있습니다. 라우터가 페이지 간 전환 시 발생하는 이벤트는 네비게이션 주기(Navigation Lifecycle)라고 합니다.
Vue Router의 네비게이션 주기에는 다음과 같은 중요한 이벤트들이 포함됩니다:
-
데이터 로딩: 새로운 컴포넌트가 렌더링되기 전에 해당 라우트 필요한 데이터를 미리 로드하는 단계입니다.
-
라우트 전환: 이벤트가 발생한 라우트로 전환됩니다.
-
컴포넌트 라이프사이클: 새로운 컴포넌트의 라이프사이클 훅들이 호출됩니다.
-
데이터 갱신: 라우트 이동에 따라 컴포넌트의 데이터가 갱신됩니다.
Vue Router를 사용하여 각 이벤트에 대한 콜백 함수를 등록할 수 있습니다. 이를 통해 라우트 전환 시 필요한 동작들을 관리하고 제어할 수 있습니다.
네비게이션 주기의 콜백 함수 등록
Vue Router에서는 beforeEach, beforeResolve, afterEach 등의 메소드를 이용하여 네비게이션 주기의 각 단계에 콜백 함수를 등록할 수 있습니다.
beforeEach
beforeEach 메소드는 라우트 전환 이전에 호출되며, 전환을 중단하거나 리디렉션을 시킬 수 있는 기회를 제공합니다. 이를 통해 인증이 필요한 라우트에 접근하기 전에 사용자 인증 여부를 확인하거나 특정 조건을 체크하여 전환을 허용하거나 차단할 수 있습니다.
router.beforeEach((to, from, next) => {
// 인증 여부 체크
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
beforeResolve
beforeResolve 메소드는 라우트 전환 후에 데이터가 로드되고 라우트의 라이프사이클 훅들이 호출된 후에 호출됩니다. 데이터가 로드되는 중이거나 컴포넌트가 갱신되는 시점에서 추가적인 동작을 수행할 수 있습니다.
router.beforeResolve((to, from, next) => {
// 데이터 로딩 중 로딩 스피너 표시
showLoader();
next();
});
afterEach
afterEach 메소드는 라우트 전환 후에 호출되며, 주로 네비게이션 후의 추가 작업을 처리할 때 활용됩니다. 예를 들어, 페이지 스크롤 위치 초기화나 로딩 스피너 감추기 등의 작업을 수행할 수 있습니다.
router.afterEach((to, from) => {
// 스크롤 위치 초기화
window.scrollTo(0, 0);
// 로딩 스피너 감추기
hideLoader();
});
이와 같이 Vue Router를 사용하여 각 네비게이션 주기의 단계별로 콜백 함수를 등록하면, SPA의 라우팅 과정을 보다 효과적으로 제어하고 관리할 수 있습니다.
결론
Vue Router의 네비게이션 주기를 이해하고 각 이벤트에 콜백 함수를 등록함으로써 SPA의 라우팅을 보다 세밀하게 제어할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 웹 애플리케이션의 동작을 효율적으로 관리할 수 있습니다.
참고 문헌: Vue Router 공식 문서