Vue Router를 활용한 라우팅 (SPA 구축)

여러 페이지를 가진 웹사이트처럼 보이지만, 실제로는 단 하나의 HTML 파일에서 자바스크립트로 화면만 갈아 끼우는 방식을 SPA(Single Page Application)라고 합니다. Vue에서 이를 완벽하게 구현해 주는 공식 도구가 바로 Vue Router입니다.

💡 핵심 포인트: 일반적인 웹사이트는 링크를 누르면 화면 전체가 하얗게 깜빡이며 새로고침 되지만, Vue Router를 사용하면 브라우저 주소창만 바뀌고 필요한 컴포넌트 조각만 부드럽게 교체되어 네이티브 앱 같은 쾌적한 속도를 냅니다.

<!-- ==========================================
// 📂 1. router/index.js (라우터 설정 파일)
// ⚠️ 주의: 실제 .js 파일에서는 <script> 태그를 작성하지 않습니다.
// ========================================== -->
<script>
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import UserView from '../views/UserView.vue';

const router = createRouter({
  history: createWebHistory(), // 주소창에 '#' 이 안 생기게 하는 최신 방식
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      // [동적 라우팅] /user/123 처럼 들어오는 ID 값을 캡처합니다.
      path: '/user/:id',
      name: 'user',
      component: UserView
    }
  ]
});

export default router;
</script>

<!-- ==========================================
// 📂 2. App.vue (라우터 적용 화면)
// ========================================== -->
<template>
  <div class="max-w-2xl mx-auto mt-10">
    <nav class="flex gap-4 mb-8 border-b pb-4">
      <!-- <a> 태그 대신 무조건 <router-link>를 쓰세요! (새로고침 방지) -->
      <router-link to="/" class="text-blue-600 font-bold hover:underline">홈으로</router-link>
      <router-link to="/user/777" class="text-blue-600 font-bold hover:underline">내 정보(777)</router-link>
    </nav>

    <!-- 매칭된 컴포넌트가 이 구멍 안에 렌더링됩니다. -->
    <main class="p-6 bg-white shadow rounded-lg">
      <router-view /> 
    </main>
  </div>
</template>

<!-- ==========================================
// 📂 3. UserView.vue (동적 라우팅 컴포넌트)
// ========================================== -->
<script setup>
import { useRoute } from 'vue-router';

// 현재 URL 정보를 담고 있는 route 객체를 꺼내옵니다.
const route = useRoute();
</script>

<template>
  <div>
    <h1 class="text-2xl font-bold">회원 정보 상세 페이지</h1>
    <!-- URL에서 '/user/:id' 위치에 입력된 값을 꺼내서 씁니다. -->
    <p class="mt-4 text-lg">조회하신 회원님의 번호는 <strong class="text-red-500">{{ route.params.id }}</strong>번 입니다.</p>
  </div>
</template>