4. Vue Router (<router-link>, <router-view>)

Vue Router

Vue Router는 Vue 애플리케이션에서 페이지 간 전환을 관리하는 데 사용되며,
이를 통해 싱글 페이지 애플리케이션(SPA)에서 페이지 전환을 처리할 수 있습니다.

 

1. Vue가 뭐야? 
2. 프레임워크란?
3. Vue3 기본 문법
4. Vue Router (<router-link>, <router-view>)
5. Pinia (상태 관리 라이브러리)
6. Vue3 Composition API
7. Pinia Store에서 ref와 reactive를 사용하는 방법
8. Pinia에서의 Composition API 스타일과 Options API 스타일

1. Vue Router 설치

먼저 Vue Router를 프로젝트에 설치해야 합니다.

npm install vue-router@4

2. 라우터 설정

Vue Router를 설정하려면 router/index.js 파일을 만들어서 라우터를 설정하고,
이를 main.js에 연결해야 합니다.

2.1. 라우터 정의 (router/index.js)

라우터에서 경로(path)와 해당 경로에서 렌더링될 컴포넌트를 정의합니다.

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';  // Vue Router의 주요 함수들 import
import Home from '../views/Home.vue';  // Home 페이지 컴포넌트
import About from '../views/About.vue';  // About 페이지 컴포넌트

// 라우터 정의
const routes = [
  {
    path: '/',         // URL 경로
    name: 'Home',      // 라우터 이름
    component: Home,   // 이 경로에 해당하는 컴포넌트
  },
  {
    path: '/about',    // URL 경로
    name: 'About',     // 라우터 이름
    component: About,  // 이 경로에 해당하는 컴포넌트
  }
];

// createRouter로 라우터 인스턴스를 생성
const router = createRouter({
  history: createWebHistory(),  // 브라우저의 history API 사용
  routes,  // 정의된 routes 배열을 전달
});

export default router;  // 라우터 인스턴스를 export

2.2. 라우터 사용 설정 (main.js)

main.js에서 Vue 애플리케이션에 라우터를 적용합니다.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';  // 루트 컴포넌트
import router from './router';  // 라우터 설정

// Vue 애플리케이션에 라우터를 사용하도록 설정
createApp(App)
  .use(router)  // 라우터 사용
  .mount('#app');  // 앱을 #app 요소에 마운트

3. <router-view>와 <router-link> 사용하기

3.1. <router-view>

<router-view>는 현재 활성화된 라우트에 맞는 컴포넌트를 렌더링합니다.
주로 App.vue에서 사용합니다.

<!-- src/App.vue -->
<template>
  <div>
    <h1>Welcome to Vue Router!</h1>
    <router-link to="/">Home</router-link> |  <!-- 링크 -->
    <router-link to="/about">About</router-link>  <!-- 링크 -->

    <!-- 현재 활성화된 라우트의 컴포넌트가 이곳에 표시됨 -->
    <router-view />
  </div>
</template>

• <router-link>는 클릭하면 다른 경로로 이동하는 링크를 만듭니다.
• <router-view>는 활성화된 라우트에 해당하는 컴포넌트를 이곳에 렌더링합니다.

3.2. <router-link>

<router-link>는 사용자가 클릭하면 URL 경로를 변경하고
페이지를 이동할 수 있는 링크를 만들어줍니다.

<!-- src/App.vue -->
<template>
  <div>
    <router-link to="/">Go to Home</router-link>  <!-- Home으로 이동 -->
    <router-link to="/about">Go to About</router-link>  <!-- About으로 이동 -->

    <router-view />  <!-- 활성화된 컴포넌트가 이곳에 표시 -->
  </div>
</template>

4. 컴포넌트 만들기

각각의 경로에 해당하는 컴포넌트를 만들어야 합니다.

4.1. Home 컴포넌트 (Home.vue)

<!-- src/views/Home.vue -->
<template>
  <div>
    <h2>Home Page</h2>
    <p>여기는 홈 페이지입니다.</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

4.2. About 컴포넌트 (About.vue)

<!-- src/views/About.vue -->
<template>
  <div>
    <h2>About Page</h2>
    <p>여기는 어바웃 페이지입니다.</p>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

5. 동적 라우팅 (Dynamic Routing)

동적 라우팅은 URL 경로에 변수를 추가하여 그 값에 따라 다른 콘텐츠를 표시하는 방법입니다.

5.1. 동적 라우팅 설정

예를 들어, 사용자 프로필 페이지를 동적 라우팅으로 구현할 수 있습니다.
경로에서 :username처럼 동적 파라미터를 받아와서 사용합니다.

// src/router/index.js
import UserProfile from '../views/UserProfile.vue';

const routes = [
  {
    path: '/user/:username',  // 동적 경로
    name: 'UserProfile',
    component: UserProfile,
  },
];

5.2. 동적 파라미터 사용

UserProfile.vue에서 :username 값을 받아서 표시할 수 있습니다.

<!-- src/views/UserProfile.vue -->
<template>
  <div>
    <h2>{{ username }}의 프로필</h2>
    <p>여기는 {{ username }}의 프로필 페이지입니다.</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  computed: {
    // URL에서 username 파라미터를 가져옴
    username() {
      return this.$route.params.username;
    },
  },
};
</script>

6. 네스트된 라우트 (Nested Routes)

라우트를 중첩할 수 있어요. 예를 들어, 메인 페이지 안에 하위 페이지를 두고 싶다면 다음과 같이 설정합니다.

// src/router/index.js
import MainPage from '../views/MainPage.vue';
import SubPage from '../views/SubPage.vue';

const routes = [
  {
    path: '/',
    component: MainPage,
    children: [
      {
        path: 'sub',
        component: SubPage,  // /sub 경로가 MainPage 내에 표시됨
      },
    ],
  },
];

 

MainPage.vue에서는 <router-view>를 사용해 하위 페이지를 렌더링할 수 있습니다.

<!-- src/views/MainPage.vue -->
<template>
  <div>
    <h2>Main Page</h2>
    <router-link to="/sub">Go to Sub Page</router-link>
    <router-view />  <!-- 하위 라우트는 이곳에 표시 -->
  </div>
</template>

정리

• <router-view>: 현재 활성화된 라우트의 컴포넌트를 표시하는 곳.
• <router-link>: 다른 페이지로 이동할 수 있는 링크.
• 동적 라우팅: URL 파라미터를 사용해 동적으로 경로를 처리.
• 네스트된 라우트: 라우트를 중첩해서 하나의 페이지 안에 여러 페이지를 넣을 수 있음.

이제 Vue Router를 사용하여 Vue 애플리케이션에서 여러 페이지를 쉽게 관리하고 전환할 수 있습니다!

 

이전: 3. Vue3 기본 문법

다음: 5. Pinia (상태 관리 라이브러리)