Vue.js 기반의 싱글 페이지 애플리케이션(SPA)을 구축할 때, 페이지 간의 이동을 제어하기 위해 vue-router 라이브러리를 사용합니다. 이 글에서는 Vue 3 환경에서 라우터를 설정하고 활용하는 전반적인 과정을 다룹니다.

1. Vue Router 설치

프로젝트 터미널에서 아래 명령어를 실행하여 Vue Router의 최신 버전을 설치합니다.

npm install vue-router@4

2. 라우터 설정 및 인스턴스 생성

라우터 설정을 관리하기 위해 프로젝트 내에 router 디렉토리를 생성하고 index.js 파일을 작성합니다. 각 경로(path)에 매핑될 컴포넌트를 정의하고 라우터 객체를 내보냅니다.

import { createRouter, createWebHistory } from 'vue-router';

// 라우팅 대상 컴포넌트 임포트
import HomeView from '@/views/HomeView.vue';
import InfoView from '@/views/InfoView.vue';
import UserProfile from '@/views/UserProfile.vue';

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/info',
    name: 'Info',
    component: InfoView
  },
  {
    path: '/profile',
    name: 'Profile',
    component: UserProfile
  }
];

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

export default router;

3. 애플리케이션에 라우터 등록

생성한 라우터 인스턴스를 Vue 애플리케이션 엔트리 파일인 main.js에서 플러그인으로 등록합니다.

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

const app = createApp(App);

app.use(router);
app.mount('#app');

4. 라우터 컴포넌트 활용

템플릿 내에서 페이지를 이동할 때는 <RouterLink>를 사용하며, 매칭된 컴포넌트가 렌더링될 위치는 <RouterView />로 지정합니다.

<template>
  <nav>
    <RouterLink to="/home">홈으로</RouterLink>
    <RouterLink to="/info">정보</RouterLink>
    <RouterLink to="/profile">프로필</RouterLink>
  </nav>
  
  <hr />
  
  <!-- 라우팅된 컴포넌트가 표시되는 영역 -->
  <RouterView />
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

5. 라우팅 컴포넌트의 생명주기

라우터에 의해 제어되는 컴포넌트는 해당 경로에 진입할 때 Mount(마운트)되고, 다른 경로로 이동하여 컴포넌트가 화면에서 사라질 때 Unmount(언마운트) 과정을 거칩니다.

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('현재 컴포넌트가 활성화되었습니다.');
});

onUnmounted(() => {
  console.log('다른 경로로 이동하여 컴포넌트가 해제되었습니다.');
});
</script>

6. 히스토리 모드 설정

Vue Router는 두 가지 주요 히스토리 모드를 제공합니다.

• createWebHistory: HTML5 History API를 사용하며, URL에 '#'이 붙지 않는 깔끔한 주소를 제공합니다. 서버 설정이 필요합니다.
• createWebHashHistory: URL에 해시(#)를 사용하며, 별도의 서버 설정 없이도 동작합니다.

7. 프로그래밍 방식의 내비게이션

템플릿의 링크 대신 JavaScript 로직 내부에서 페이지 이동을 제어해야 할 경우 useRouter 훅을 사용합니다.

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const navigateToInfo = () => {
  // 히스토리 스택에 추가하며 이동
  router.push('/info');
};

const replaceToHome = () => {
  // 현재 기록을 대체하며 이동 (뒤로 가기 불가)
  router.replace('/home');
};
</script>

<template>
  <button @click="navigateToInfo">정보 페이지로 이동</button>
  <button @click="replaceToHome">홈으로 대체</button>
</template>

8. 히스토리 기록 제어 (Replace 속성)

<RouterLink> 태그에 replace 속성을 추가하면, 해당 링크를 클릭해 이동할 때 브라우저 히스토리에 현재 페이지 기록을 남기지 않습니다. 이는 이전 페이지로 돌아가는 것을 방지해야 할 때 유용합니다.

<RouterLink to="/home" replace>뒤로 가기가 불가능한 이동</RouterLink>