[Vue] 초보자를 위한 Vue Router 완벽 가이드

Vue Router는 Vue.js에서 웹 앱의 페이지 이동을 관리하는 도구다.

이 포스트는 Vue Router를 처음 접하는 초보자를 위해 Vue Router란 무엇인지, 왜 필요한지, 어떻게 사용하는지를 쉽게 설명한다.

간단한 예제와 실생활 비유를 통해 개념을 익히고, 실제 코드를 따라 할 수 있도록 구성한다.

키워드: Vue Router 초보, Vue 3 라우팅, SPA 페이지 이동.

---

Vue Router란?

Vue Router는 Vue.js 애플리케이션에서 페이지 이동을 구현하는 공식 라이브러리다.

SPA(Single Page Application)에서 브라우저의 새로고침 없이 URL을 변경하고, 각 URL에 맞는 콘텐츠를 보여준다.

 

비유:

• Vue Router는 레스토랑 메뉴판과 같다. 손님이 “메뉴 1번(홈)”을 주문하면 홈 페이지가,
  “메뉴 2번(정보)”을 주문하면 정보 페이지가 나온다. 메뉴판(Vue Router)은 주문(URL)을 받아 올바른 요리(컴포넌트)를 제공한다.

예시:

• 페이스북에서 /profile → 프로필 페이지, /messages → 메시지 페이지로 이동.
• Vue Router는 URL(/profile, /messages)을 보고 적절한 컴포넌트를 렌더링한다.

---

Vue Router의 개념

Vue Router의 핵심 개념을 초보자도 이해하도록 정리한다:

1. 라우트(Route):
   • URL 경로와 컴포넌트를 연결한 설정.
   • 예: /home → Home.vue 컴포넌트.
2. 라우터(Router):
   • 모든 라우트를 관리하는 객체. URL 변경을 감지해 적절한 컴포넌트를 표시.
3. RouterView:
   • 현재 URL에 맞는 컴포넌트를 화면에 렌더링하는 Vue 컴포넌트.
   • 예: <RouterView />는 /home이면 Home.vue를 보여준다.
4. RouterLink:
   • 페이지 이동을 위한 링크 컴포넌트. HTML의 <a> 태그와 비슷.
   • 예: <RouterLink to="/home">홈</RouterLink> → /home으로 이동.
5. 히스토리 모드:
   • 브라우저의 URL 관리 방식. createWebHistory()는 일반적인 URL(예: /home)을 사용한다.
6. 지연 로딩(Lazy Loading):
   • 필요한 컴포넌트만 동적으로 불러와 초기 로드 속도를 빠르게 한다.

비유:

• 라우트는 레스토랑 메뉴의 “1번: 불고기” 항목.
• 라우터는 주문을 처리하는 주방장.
• RouterView는 손님에게 음식을 서빙하는 접시.
• RouterLink는 메뉴판에서 주문 버튼.

---

Vue Router의 목적

Vue Router는 SPA에서 페이지 이동을 구현한다. SPA는 단일 HTML 페이지로 동작하므로, 새로고침 없이 콘텐츠를 바꿔야 한다. Vue Router는 이를 해결한다.

주요 목적:

1. 페이지 간 부드러운 이동:
   • 새로고침 없이 URL 변경 (예: /home → /about).
2. 컴포넌트 기반 렌더링:
   • 각 URL에 맞는 Vue 컴포넌트를 표시.
3. 사용자 경험 개선:
   • 빠른 페이지 전환, 브라우저 뒤로/앞으로 가기 지원.
4. 모듈화:
   • 코드를 경로별로 관리해 유지보수 쉽게.

예시:

• 쇼핑몰 웹사이트:
  • /products → 상품 목록 페이지.
  • /cart → 장바구니 페이지.
  • Vue Router는 URL에 따라 적절한 페이지를 보여준다.

비유:

• Vue Router는 GPS 내비게이션이다. 목적지(URL)를 입력하면 올바른 길(컴포넌트)로 안내한다.

---

Vue Router 사용 방법

Vue Router를 사용하는 기본 단계를 초보자도 따라 할 수 있도록 설명한다. 간단한 쇼핑몰 예제로 진행한다:

• 페이지: 홈(/), 상품 목록(/products), 정보(/about).
• 환경: Vue 3, Vite, TypeScript.

1. 프로젝트 설정

Vite로 Vue 프로젝트를 생성한다:

npm create vite@latest my-shop -- --template vue-ts
cd my-shop
npm install

2. Vue Router 설치

Vue Router를 설치한다:

npm install vue-router@4

3. 라우터 설정

src/router/index.ts에서 라우트를 정의한다:

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../views/HomePage.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomePage,
  },
  {
    path: '/products',
    name: 'products',
    component: () => import('../views/ProductsPage.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutPage.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

• 설명:
  • createRouter: 라우터 객체 생성.
  • createWebHistory: 브라우저 URL 관리 (예: /products).
  • routes: 경로와 컴포넌트 매핑.
    • path: URL 경로.
    • name: 라우트 이름 (내비게이션용).
    • component: 렌더링할 컴포넌트.
  • () => import(...): 지연 로딩으로 초기 로드 속도 개선.
• 예시:
  • /products → ProductsPage.vue 렌더링.
  • name: 'products'는 프로그래밍 방식 내비게이션(예: router.push({ name: 'products' }))에 사용.

4. 메인 앱에 라우터 연결

src/main.ts에서 Vue Router를 등록한다:

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

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

• 설명:
  • app.use(router): Vue Router를 앱에 추가.
  • app.mount('#app'): index.html의 <div id="app">에 렌더링.
• 예시:
  • 라우터가 활성화되면 URL 변경 시 컴포넌트가 자동 렌더링된다.

5. 루트 컴포넌트 설정

src/App.vue에서 RouterView와 RouterLink를 사용한다:

<!-- src/App.vue -->
<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router';
</script>

<template>
  <nav class="bg-gray-800 text-white p-4">
    <RouterLink to="/" class="mr-4">Home</RouterLink>
    <RouterLink to="/products" class="mr-4">Products</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </nav>
  <main class="p-4">
    <RouterView />
  </main>
</template>

• 설명:
  • RouterLink: <a> 태그처럼 링크 생성. to 속성으로 경로 지정.
  • RouterView: 현재 URL에 맞는 컴포넌트를 표시.
  • Tailwind CSS: bg-gray-800 (네비게이션 바 배경), p-4 (패딩).
• 예시:
  • “Home” 링크 클릭 → / → HomePage.vue.
  • 네비게이션 바는 모든 페이지에 고정 표시.

6. 페이지 컴포넌트 생성

src/views/에 HomePage.vue, ProductsPage.vue, AboutPage.vue를 만든다:

 

<!-- src/views/HomePage.vue -->
<script setup lang="ts"></script>

<template>
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Welcome to Our Shop</h2>
    <p>Explore our amazing products!</p>
  </div>
</template>

<!-- src/views/ProductsPage.vue -->
<script setup lang="ts"></script>

<template>
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Products</h2>
    <p>Browse our collection of items.</p>
  </div>
</template>

<!-- src/views/AboutPage.vue -->
<script setup lang="ts"></script>

<template>
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">About Us</h2>
    <p>We are a shop dedicated to quality.</p>
  </div>
</template>

• 설명:
  • 각 컴포넌트는 간단한 콘텐츠를 표시.
  • Tailwind: max-w-4xl mx-auto로 콘텐츠 중앙 정렬.
• 예시:
  • /products → “Products” 제목과 설명.

7. 테스트

서버를 실행한다:

npm run dev

 

브라우저에서 확인:

• http://localhost:5173/: 홈 페이지.
• http://localhost:5173/products: 상품 페이지.
• http://localhost:5173/about: 정보 페이지.

네비게이션 바의 링크를 클릭해 페이지 이동을 테스트한다.

---

초보자를 위한 추가 예제

Vue Router의 주요 기능을 간단한 예제로 익힌다.

예제 1: 동적 라우트

동적 라우트는 URL 파라미터를 사용한다. 예: /product/1 → 상품 1번 상세 페이지.

코드:

// src/router/index.ts
const routes = [
  {
    path: '/product/:id',
    name: 'product',
    component: () => import('../views/ProductPage.vue'),
  },
];

<!-- src/views/ProductPage.vue -->
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
const productId = route.params.id;
</script>

<template>
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Product {{ productId }}</h2>
    <p>Details for product {{ productId }}.</p>
  </div>
</template>

• 설명:
  • :id: URL의 동적 파라미터.
  • useRoute(): 현재 라우트 정보 접근.
  • /product/1 → “Product 1” 표시.
• 예시:
  • /product/123 → “Product 123” 페이지.

예제 2: 프로그래밍 방식 내비게이션

버튼 클릭으로 페이지 이동을 구현한다.

<!-- src/views/HomePage.vue -->
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

const goToProducts = () => {
  router.push({ name: 'products' });
};
</script>

<template>
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Welcome to Our Shop</h2>
    <p>Explore our amazing products!</p>
    <button
      class="bg-blue-500 text-white px-4 py-2 rounded"
      @click="goToProducts"
    >
      View Products
    </button>
  </div>
</template>

• 설명:
  • useRouter(): 라우터 객체 접근.
  • router.push(): 지정한 라우트로 이동.
  • 버튼 클릭 → /products 페이지.
• 예시:
  • “View Products” 버튼 → 상품 페이지로 이동.

---

자주 묻는 질문과 오류

초보자가 겪을 수 있는 질문과 오류를 정리한다:

1. Vue Router는 언제 사용하나?
   • 여러 페이지를 가진 SPA에서 사용. 예: 홈, 상품, 정보 페이지.
2. RouterLink와 <a> 태그의 차이?
   • <RouterLink>는 새로고침 없이 SPA 내비게이션을 처리. <a>는 페이지 새로고침.
3. 오류: Cannot find module 'vue-router':
   • 해결:
     bash

      

     복사

     npm install vue-router@4
4. 오류: RouterView가 렌더링 안 됨:
   • main.ts에서 app.use(router) 누락.
     typescript

      

     복사

     app.use(router);
5. 오류: 컴포넌트가 안 보임:
   • src/views/에 파일이 없거나 경로 오류.
     • 해결: 파일 생성 확인.

---

요약

Vue Router는 Vue.js에서 SPA의 페이지 이동을 구현한다. 주요 개념은 라우트, 라우터, RouterView, RouterLink다. 설치, 라우터 설정, 컴포넌트 연결로 간단한 웹 앱을 만들 수 있다. 쇼핑몰 예제를 통해 홈, 상품, 정보 페이지를 구현했다.

 

명령어 요약:

 

npm install vue-router@4
npm run dev