Vue 프로젝트를 하다 보면, 컴포넌트를 여러 개 만들어서 URL에 따라 서로 다른 화면을 보여줘야 할 때가 많습니다.
이때 사용하는 것이 바로 Vue Router입니다.
Vue Router는 Vue 공식 라우터 라이브러리로, 페이지 간 이동을 브라우저 새로고침 없이 할 수 있게 해줍니다.
즉, Vue Router를 사용하면 하나의 페이지에서 다양한 화면 전환이 가능한 SPA(Single Page Application)를 만들 수 있게 됩니다.
1️⃣ 라우터(Router)란?
Vue에서 라우터(Router)는 어떤 URL 경로로 접근했을 때 어떤 컴포넌트를 보여줄지 결정하는 역할을 합니다.
예를 들어, 사용자가 /about이라는 주소를 입력하거나 버튼을 눌러 이동하면
Vue Router는 그 경로에 해당하는 컴포넌트인 AboutView.vue를 찾아서 화면에 보여주는 식입니다.
즉, URL과 컴포넌트 사이를 연결해주는 중간 관리자 역할을 하는 거죠.
🔄 비유하자면, 택배 주소(URL)를 보면 어떤 집(컴포넌트)에 물건을 넣을지 알려주는 역할입니다.
핵심 요약:
라우터는 URL ↔ 컴포넌트 사이를 매핑해주는 시스템입니다.
2️⃣ 라우트(Route)란?
라우트(Route)는 Vue Router에서 정의하는 한 줄 한 줄의 매핑 정보입니다.
즉, "이 URL에는 이 컴포넌트를 보여준다"는 규칙 하나를 의미해요.
예를 들면 아래와 같습니다.
{ path: '/about', component: AboutView }
- 이 한 줄이 라우트입니다.
- 사용자가
/about으로 들어오면AboutView.vue컴포넌트를 보여준다는 의미입니다.
여러 라우트를 모아서 하나의 routes 배열로 정의하고, 이 배열을 기반으로 Vue Router를 생성합니다.
3️⃣ Vue Router 설치 및 설정
Vue Router는 별도로 설치해서 프로젝트에 연결해줘야 합니다.
1. 설치
npm install vue-router
2. 라우터 정의 (src/router/index.js)
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';
const routes = [
{ path: '/', name: 'home', component: HomeView },
{ path: '/about', name: 'about', component: AboutView },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
설명:
routes배열 안에 여러 개의 라우트 정의를 넣습니다.- 각 라우트는
path,name,component세 가지 정보로 구성됩니다. createRouter()는 위 설정을 기반으로 라우터 인스턴스를 만들어줍니다.createWebHistory()는 HTML5 히스토리 모드를 사용하여 주소창에#없이 깔끔한 경로를 유지합니다.
3. main.js에 라우터 연결
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App)
.use(router) // Vue 인스턴스에 라우터 연결
.mount('#app');
라우터를 앱에 등록하면 모든 컴포넌트에서 this.$router, this.$route 혹은 useRouter(), useRoute() 같은 함수를 사용할 수 있게 됩니다.
4️⃣ <RouterLink>와 <RouterView> 이해하기
Vue Router에서 반드시 알아야 할 두 가지 핵심 컴포넌트가 있습니다.
| 컴포넌트 | 설명 |
|---|---|
<RouterLink> | 사용자가 클릭할 수 있는 링크. 기존 <a href> 대신 사용 |
<RouterView> | 현재 URL에 해당하는 컴포넌트를 렌더링해주는 자리 |
예시 – App.vue
<template>
<nav>
<RouterLink to="/">Home</RouterLink>
<span> | </span>
<RouterLink to="/about">About</RouterLink>
</nav>
<main>
<RouterView />
</main>
</template>
<RouterLink>는 링크를 생성하고 URL을 바꿔주는 역할을 합니다.<RouterView>는 해당 URL에 매칭되는 컴포넌트를 이 자리에 표시해줍니다.
특징:
- 이 구조 덕분에 새로고침 없이 화면 전환이 가능해지며,
- Vue는 진정한 SPA(Single Page Application)를 구현할 수 있게 됩니다.
5️⃣ 버튼 클릭으로 화면 이동하기 (<script setup> 방식)
실제 개발에서는 유저가 버튼을 클릭하거나 어떤 액션을 했을 때 프로그래밍적으로 페이지를 이동하는 일이 많습니다.
이럴 때 사용하는 것이 useRouter()입니다.
예시 – HomeView.vue
<template>
<h1>Home Page</h1>
<button @click="goAbout">About 페이지로 이동</button>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
const router = useRouter(); // 이동 기능 (push, replace 등)
const route = useRoute(); // 현재 경로 정보 (name, path 등)
// 현재 페이지 정보 출력
console.log(route.name); // 현재 라우트 이름
console.log(route.path); // 현재 경로
// 버튼 클릭 시 /about 경로로 이동
const goAbout = () => {
router.push('/about');
};
</script>
설명
useRouter(): 라우팅 동작을 수행하는 기능 (push,replace등)useRoute(): 현재 페이지의 정보(name, path, params, query 등)를 제공router.push('/about'): 코드로 라우트를 이동시킴 (페이지 전환)
