Vue.js는 사용자 인터페이스를 구축하기 위한 빠르고 확장 가능한 프론트엔드 프레임워크입니다. Vue Router는 Vue 애플리케이션을 위한 공식 라우팅 라이브러리로, 페이지 네비게이션 및 컴포넌트 호출을 관리합니다. 이 글에서는 Vue Router를 사용하여 컴포넌트를 호출하는 방법을 살펴보겠습니다.

Vue Router 설치하기

우선 애플리케이션에 Vue Router를 설치해야 합니다. vue-router 패키지를 사용하여 Vue 프로젝트에 라우팅 기능을 추가할 수 있습니다. 명령 프롬프트나 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

npm install vue-router

라우트 정의 및 적용

Vue Router를 사용하려면 각 라우트에 해당하는 컴포넌트를 정의해야 합니다. 또한, 각 라우트의 경로를 지정하여 해당 컴포넌트를 호출할 수 있습니다. 예를 들어, 다음과 같이 두 개의 컴포넌트를 가진 간단한 라우트 구성을 할 수 있습니다.

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
});

컴포넌트 호출

이제 정의된 라우터를 사용하여 컴포넌트를 호출할 수 있습니다. 예를 들어, 특정 링크를 클릭하거나 URL을 통해 라우트를 호출할 수 있습니다. 다음은 간단한 방법으로 라우터 링크를 생성하는 예제입니다.

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

<router-view></router-view>

<router-link> 컴포넌트는 화면에 라우터 링크를 렌더링하며, to 속성을 통해 해당 경로로 이동할 수 있습니다. 또한, <router-view> 컴포넌트는 현재 활성화된 라우트에 해당하는 컴포넌트를 렌더링합니다.

Vue Router를 활용하여 컴포넌트를 호출하는 방법에 대해 간략하게 살펴보았습니다. Vue Router를 통해 애플리케이션의 라우팅을 관리하고 화면을 동적으로 제어할 수 있으며, 컴포넌트 호출 및 네비게이션에 대한 다양한 기능을 제공합니다.

더 자세한 내용은 Vue Router 공식 문서를 참고하시기 바랍니다.