Vue.js는 모던 웹 애플리케이션을 개발하기 위한 프로그레시브 프레임워크 중 하나로, 라우팅 기능을 포함하고 있습니다. Vue.js의 라우터(라우팅 기능을 담당하는 모듈)를 사용하면 브라우저 URL을 기반으로 애플리케이션을 구성하고, 페이지 간의 이동을 쉽게 할 수 있습니다.

Vue Router 설치

먼저, Vue 애플리케이션에 Vue Router를 설치해야 합니다. npm을 이용하여 다음과 같이 Vue Router를 설치할 수 있습니다.

npm install vue-router

Vue Router 설정

Vue Router를 설치한 후, Vue 애플리케이션에 라우터를 설정해야 합니다.

import Vue from '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
});

export default router;

위 코드에서 Home과 About은 각각 홈페이지와 소개페이지를 나타내는 컴포넌트입니다. routes 배열에는 각 URL 경로에 대응하는 컴포넌트를 정의합니다.

애플리케이션에 라우터 적용

다음으로, 설정한 라우터를 Vue 애플리케이션에 적용해야 합니다.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

위 코드에서 router를 Vue 인스턴스에 주입하고, 렌더링할 루트 컴포넌트에 라우터를 연결합니다.

Vue Router 사용

이제 Vue Router가 설정되었으므로, 컴포넌트에서 라우팅을 사용할 수 있습니다.

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

<script>
export default {
  name: 'App'
}
</script>

위 코드에서 router-link는 라우터 링크를 생성하여 클릭 시 해당 URL로 이동하고, router-view는 현재 라우터에 맞는 컴포넌트를 렌더링합니다.

이러한 방식으로 Vue.js 애플리케이션에 간단한 라우팅을 구현할 수 있습니다.

더 복잡한 라우팅 및 네비게이션 가드, 동적 라우터 및 중첩된 라우터 등을 구현하고자 한다면 Vue Router 공식 문서를 참고하는 것이 좋습니다.

참고 자료

• Vue Router 공식 문서
• Vue.js 공식 사이트