Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크이며, Vue Router는 Vue.js 애플리케이션에 보다 복잡한 라우팅 요구사항을 처리하기 위한 공식 라우터입니다. Vue Router를 이용하면 여러 페이지를 가진 SPA(Single Page Application)를 만들 수 있습니다.

Vue Router 설정

Vue Router를 사용하려면, 먼저 애플리케이션의 루트에 Vue Router를 연결해야 합니다. vue-router 라이브러리를 설치한 후, main.js 파일에서 다음과 같이 Vue Router를 설정합니다.

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
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 및 About 컴포넌트는 각각 홈페이지 및 소개 페이지를 나타냅니다.

라우터 링크

이제 라우팅이 설정되었으므로, 애플리케이션에 링크를 추가하여 다른 페이지 간에 이동할 수 있습니다. Vue Router는 <router-link> 컴포넌트를 제공하여 이를 수행할 수 있습니다.

<!-- 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>는 애플리케이션 내에서 홈페이지와 소개 페이지로 이동하는 링크를 생성합니다. 또한, <router-view>는 현재 경로에 맞는 컴포넌트를 렌더링합니다.

동적 라우팅

때로는 라우트에 동적 값을 전달해야 할 수도 있습니다. Vue Router에서는 이를 쉽게 처리할 수 있습니다.

const routes = [
  { path: '/user/:id', component: User }
]

위의 예제에서 :id는 동적인 사용자 아이디를 나타내며, /user/1 또는 /user/2와 같은 경로로 라우팅할 수 있습니다.

마치며

Vue Router를 이용하여 Vue 애플리케이션을 구성하는 방법을 살펴보았습니다. Vue Router는 복잡한 라우팅 구성을 쉽게 처리할 수 있도록 도와주는 강력한 도구입니다.

더 많은 정보는 Vue Router 공식 문서를 참고하시기 바랍니다.

위의 내용들을 기반으로 Vue Router를 이용하여 웹 애플리케이션을 구성하는 방법을 살펴보았습니다.

이 문서는 Vue.js의 공식문서를 참고하여 작성되었습니다.