Vue Router는 Vue SPA를 위한 공식 클라이언트 사이드 라우터입니다. URL을 컴포넌트에 매핑하고 전체 페이지 새로고침 없이 교체하며, 내비게이션 전에 로직(인증 확인 등)을 실행하는 내비게이션 가드를 제공합니다.
{ createRouter, createWebHistory } ;
routes = [
{ : , : },
{ : , : },
{ : , : (),
: { : } },
];
router = ({ : (), routes });
<template>
<RouterLink to="/users/42">Profile</RouterLink> <!-- 선언적 내비게이션 -->
<RouterView /> <!-- 매칭된 컴포넌트가 렌더링되는 곳 -->
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); // 현재 라우트 읽기: route.params.id, route.query
const router = useRouter(); // 프로그래밍 방식 내비게이션: router.push("/home")
</script>
// 전역 가드 — 모든 내비게이션 전에 실행 (인증에 적합)
router.beforeEach((to, from) => {
const authed = useAuthStore().isLoggedIn;
if (to.meta.requiresAuth && !authed) {
return "/login"; // 리다이렉트: 경로를 반환 (또는 취소하려면 false)
}
// true 반환 / 아무것도 반환 안 함 → 내비게이션 허용
});
가드는 to(대상 라우트)와 from(현재)을 받으며, 허용, 취소(false), 또는 리다이렉트(위치 반환)할 수 있습니다. meta.requiresAuth 플래그 + 전역 beforeEach는 표준적인 인증 게이팅 패턴입니다.
전역: router.beforeEach / afterEach — 모든 내비게이션 (인증, 분석)
라우트별: 라우트 설정의 beforeEnter — 특정 라우트
컴포넌트 내: onBeforeRouteLeave — 예: "저장되지 않은 변경, 떠날까요?" 프롬프트
{ path: "/settings", component: Settings, children: [
{ path: "profile", component: Profile }, // → /settings/profile, 중첩 <RouterView>에 렌더링
]}
추가로: 라우트 파라미터, 쿼리 문자열, 명명된 라우트, 스크롤 동작, 코드 분할을 위한 지연 로딩 라우트 컴포넌트.
Vue Router는 모든 다중 페이지 Vue SPA에 필수적입니다 — 클라이언트 사이드 내비게이션(빠르고 새로고침 없음), 동적/중첩 라우트, RouterLink/RouterView를 제공합니다.
내비게이션 가드는 횡단 관심사(cross-cutting concern)의 핵심 기능입니다: 인증으로 보호된 라우트 게이팅, 페이지 조회 로깅, 저장되지 않은 폼에서 벗어나는 것 방지.
인증을 위한 meta + 전역 beforeEach 패턴은 거의 모든 실제 앱이 구현하는 것입니다.