[javascript] Vue.js의 라우터 기능

01 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 구성하기 위한 프론트엔드 프레임워크입니다. 이러한 프레임워크를 사용하면 사용자에게 보여주는 웹 페이지를 동적으로 관리할 수 있습니다. Vue.js의 라우터 기능은 SPA(Single Page Application)를 개발할 때 특히 유용합니다. 이 기능은 페이지 간의 전환 및 주소별 컴포넌트 로딩을 관리하는 데 도움을 줍니다.

라우터 기능의 주요 개념

Vue.js의 라우터 기능을 사용하기 위해 알아둬야 할 몇 가지 주요 개념을 살펴보겠습니다.

라우트

라우트(route)는 페이지 내비게이션을 관리하기 위한 규칙을 정의합니다. 예를 들어, “/home” 경로의 라우트는 “Home” 페이지 컴포넌트를 로딩할 수 있도록 설정될 수 있습니다. 라우트는 페이지 주소와 컴포넌트 간의 매핑을 정의하는 역할을 합니다.

라우터

라우터(router)는 라우트의 집합입니다. 라우터는 브라우저의 주소 변화를 감지하고 맞는 라우트에 해당하는 컴포넌트를 렌더링합니다. Vue.js에서는 vue-router라는 패키지를 사용하여 라우터를 구현할 수 있습니다.

컴포넌트

컴포넌트(component)는 Vue.js에서 UI를 구성하는 단위입니다. 각각의 라우트에는 해당 라우트와 연결된 컴포넌트가 있어야 합니다. 컴포넌트는 재사용 가능하며, 상태와 동작을 갖는 독립적인 단위입니다.

Vue.js 라우터 사용 방법

Vue.js 라우터를 사용하기 위해서는 몇 가지 단계를 따라야 합니다.

vue-router 패키지를 설치합니다.

npm install vue-router

router.js 라는 새로운 파일을 만들고 아래와 같이 라우터 설정을 작성합니다.

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: '/home', component: Home },
  { path: '/about', component: About },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

메인 Vue 인스턴스를 생성할 때 라우터를 등록합니다.

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

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

컴포넌트 파일에 라우터 링크를 추가하여 페이지 간 이동을 처리합니다.

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

<script>
export default {
  // 컴포넌트 로직
}
</script>

위의 단계를 따르면 Vue.js 프로젝트에 라우터를 적용할 수 있습니다. 이를 통해 웹 페이지의 경로에 따라 적절한 컴포넌트를 렌더링할 수 있고, 페이지 간의 전환을 원활하게 처리할 수 있습니다.

결과

Vue.js의 라우터 기능을 사용하면 SPA를 개발하는 데 있어서 편의성과 유연성이 높아집니다. 또한, 페이지 간의 전환과 주소 관리를 자동으로 처리할 수 있으므로 사용자 경험을 향상시킬 수 있습니다. Vue.js의 라우터는 프론트엔드 개발에서 필수적인 요소 중 하나이므로, 프로젝트에 적용해보는 것을 추천드립니다.

참고 자료

Vue.js 공식 문서: Vue Router
Vue.js 라우터 예제 및 사용법: Vue Router Tutorial