Vue Router 사용 가이드

베하~!

BTC 블랙아웃입니다!!

오늘은 Vue.js 애플리케이션에서 라우팅을 구현하기 위한 Vue Router 사용 가이드를 준비했습니다. Vue Router는 Vue.js 공식 라이브러리로, 페이지 간의 전환, 동적 라우팅, 중첩된 라우트 구조 등을 쉽게 구현할 수 있도록 도와줍니다. 지금부터 Vue Router의 기본적인 사용법과 주요 기능을 알아보겠습니다.

설치 및 설정

Vue Router를 사용하기 위해서는 먼저 설치와 설정을 진행해야 합니다. 아래의 명령어로 Vue Router를 설치합니다.

npm install vue-router@3.0.7

저는 vue2를 사용중이기 때문에 3 버전을 사용했습니다.

vue3을 사용하시는 경우 4버전을 install 해주세요.

설치가 완료되면 router/index.js와 같은 파일을 생성하여 Vue Router를 설정합니다.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // 라우트 구성
];

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

export default router;

위의 예제에서는 routes 배열에 라우트 구성을 작성하고, VueRouter 인스턴스를 생성하여 routes를 전달합니다. 생성한 라우터 인스턴스를 export하여 다른 파일에서 사용할 수 있도록 합니다.

기본적인 라우트 구성

라우터를 설정한 후에는 페이지에 대한 라우트 구성을 작성해야 합니다. routes 배열에 각 라우트의 경로와 컴포넌트를 지정합니다. 예를 들어, 홈 페이지와 사용자 페이지로 구성된 간단한 예제를 살펴보겠습니다.

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

Vue.use(VueRouter);

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

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

export default router;

위의 예제에서 / 경로는 Home 컴포넌트와 연결되고, /user 경로는 User 컴포넌트와 연결됩니다.

라우터 인스턴스 연결

마지막으로, 라우터 인스턴스를 애플리케이션의 루트 컴포넌트에 연결해야 합니다. main.js 파일에서 다음과 같이 작성합니다.

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

Vue.config.productionTip = false

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

위의 예제에서 router를 Vue 인스턴스의 router 옵션에 전달합니다. 이렇게 하면 라우터가 애플리케이션에 연결되고, 라우팅 기능을 사용할 수 있게 됩니다.

뷰 렌더링

라우터를 사용하여 특정 경로에 대한 컴포넌트를 렌더링하는 방법에 대해 알아보겠습니다. <router-view> 컴포넌트를 사용하여 현재 경로에 대한 컴포넌트를 렌더링할 수 있습니다.

예를 들어, 메인 컴포넌트인 App.vue에 <router-view/>를 사용하면 이전에 정의한 라우팅을 이용할 수 있게 됩니다.

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

이 후에 경로를 ‘/’ 로 이동하면 Home 컴포넌트가, ‘/user’ 로 이동하면 User 컴포넌트가 <router-view> 내에 렌더링 되어 화면상에 나타나는 것을 확인할 수 있습니다!

Vue Router를 사용하여 페이지 간의 전환과 동적 라우팅을 구현하는 방법에 대해 알아보았습니다. 이제 Vue Router를 효과적으로 활용하여 다양한 라우팅 기능을 구현할 수 있을 것입니다.

추가적인 기능과 고급 사용법에 대해서는 Vue Router 공식 문서를 참고해보시기 바랍니다.

이상으로 Vue Router 사용 가이드를 마치겠습니다. Vue Router를 통해 더욱 동적이고 효율적인 Vue.js 애플리케이션을 개발하시길 바랍니다!

감사합니다.

저작자표시 비영리 (새창열림)