Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이며, Vue Router는 Vue.js 애플리케이션의 라우팅을 지원하는 공식 라이브러리입니다. 이 라이브러리를 사용하면 SPA (Single Page Application)를 쉽게 구축할 수 있습니다.

Vue Router 설치

Vue Router를 사용하려면 먼저 프로젝트에 라이브러리를 설치해야 합니다. npm을 사용하여 다음 명령으로 Vue Router를 설치할 수 있습니다.

npm install vue-router

혹은 yarn을 사용하여도 설치가 가능합니다.

yarn add vue-router

기본 라우팅

Vue Router를 사용하여 간단한 라우팅을 설정해봅시다. 예를 들어 두 개의 페이지를 만들고, 각 페이지에 대한 경로를 설정합니다.

// main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

위 코드에서 Home.vue와 About.vue는 각각 홈페이지와 어바웃 페이지 컴포넌트를 나타냅니다.

링크 및 네비게이션

라우터를 설정했다면, 이제 라우터 링크를 사용하여 애플리케이션에서 페이지 간 전환이 가능합니다.

<!-- App.vue -->

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<router-link>는 브라우저의 URL이 변경되고, 페이지가 다시 렌더링되는 것을 방지하는 <a> 태그와 비슷한 역할을 합니다.

동적 라우팅

동적 라우팅을 사용하여 라우터가 동적으로 생성될 수 있습니다. 예를 들어 사용자가 선택한 사용자 ID에 따라 다른 사용자 프로필을 표시할 수 있습니다.

// main.js

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: UserProfile }
  ]
});

위의 코드에서 :id는 사용자의 ID를 나타내며, 동적으로 바뀔 수 있는 부분입니다.

이제 Vue Router를 사용하여 간단한 SPA를 만드는 방법에 대해 알아보았습니다. Vue Router는 더 복잡한 라우팅 및 네비게이션 요구 사항에도 적합하며, 공식 문서에서 추가 정보를 확인할 수 있습니다.