Vue Router로 페이지 이동 구현하기 - Vue 기본기 다지기 5편

Implementing Page Navigation with Vue Router - Vue Basics Part 5

npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
 
// 1. 각 URL 경로에 보여줄 컴포넌트들을 정의합니다.
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]
 
// 2. 라우터 인스턴스를 생성합니다.
const router = createRouter({
  history: createWebHistory(), // HTML5 History API를 사용합니다.
  routes, // `routes: routes` 와 동일합니다.
})
 
// 3. 라우터 인스턴스를 내보냅니다.
export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 방금 만든 router/index.js 파일을 가져옵니다.
 
const app = createApp(App)
 
app.use(router) // Vue 앱에 라우터를 사용하겠다고 알려줍니다.
app.mount('#app')

<template>
  <header>
    <nav>
      <router-link to="/">Home</router-link> | 
      <router-link to="/about">About</router-link>
    </nav>
  </header>
 
  <main>
    <router-view />
  </main>
</template>
 
<style>
nav {
  padding: 20px;
  text-align: center;
}
nav a {
  font-weight: bold;
  color: #2c3e50;
}
nav a.router-link-exact-active {
  color: #42b983; /* 현재 활성화된 링크 스타일 */
}
</style>

// ... 기존 코드 ...
import UserView from '../views/UserView.vue'
 
const routes = [
  // ... Home, About 라우트 ...
  {
    // :id 부분이 동적으로 변경되는 파라미터입니다.
    path: '/users/:id',
    name: 'user',
    component: UserView
  }
]
// ...

<script setup>
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
 
// useRoute()를 호출하여 현재 라우트 정보를 가져옵니다.
const route = useRoute()
 
// route.params 객체에서 동적 파라미터 'id'를 가져옵니다.
const userId = ref(route.params.id)
 
onMounted(() => {
  // 컴포넌트가 마운트되면 콘솔에 사용자 ID를 출력합니다.
  // 실제 앱에서는 이 ID로 사용자 정보를 서버에 요청할 수 있습니다.
  console.log(`이 사용자의 ID는 ${userId.value} 입니다.`);
})
</script>
 
<template>
  <div>
    <h2>사용자 프로필 페이지</h2>
    <p>사용자 ID: {{ userId }}</p>
  </div>
</template>

<template>
  <div>
    <h1>404 Not Found</h1>
    <p>요청하신 페이지를 찾을 수 없습니다.</p>
    <router-link to="/">홈으로 돌아가기</router-link>
  </div>
</template>

// ... 기존 코드 ...
import NotFoundView from '../views/NotFoundView.vue'
 
const routes = [
  // ... Home, About, User 라우트 ...
  
  // 정의된 다른 경로와 일치하지 않는 모든 경로를 잡습니다.
  { 
    path: '/:pathMatch(.*)*', 
    name: 'NotFound',
    component: NotFoundView 
  },
]
// ...