[Vue] Vue Router

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> 내에 렌더링 되어 화면상에 나타나는 것을 확인할 수 있습니다!

 

- ‘localhost:8888/’ 로 이동한 결과

 

- ‘localhost:8888/user 로 이동한 결과

 

---

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

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

 

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

감사합니다.