Vue Router는 Vue SPA에서 URL ↔ 컴포넌트를 매핑하고, router-link/useRouter로 페이지 전환을 처리합니다.

⚙️ 기본 설정

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import Post from '@/views/Post.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/post/:id', component: Post, props: true },
  ],
});

export default router;

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

🔗 컴포넌트에서 사용

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

const goDetail = (id: string) => {
  router.push(`/post/${id}`);
};
</script>

<template>
  <RouterLink to="/">home</RouterLink>
  <p>{{ route.params.id }}</p>
</template>

🛡️ Navigation Guard

• beforeEach — 인증, 권한 체크
• beforeRouteEnter / beforeRouteUpdate — 컴포넌트 단위 (Options)
• onBeforeRouteLeave — Composition API (vue-router)

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return '/login';
  }
});

⚖️ React와 비교

🔗 참고 자료

• Vue Router — Vue 공식 라우터 문서 홈이다.
• Introduction — 라우트 선언과 기본 사용법을 설명한다.
• Navigation Guards — beforeEach 등 가드 API를 설명한다.
• Nested Routes — 중첩 라우트 구성을 설명한다.