Vue 라우터: Vue Router를 사용한 싱글 페이지 애플리케이션(SPA) 라우팅 #4

by

Vue.js는 뛰어난 사용자 경험을 제공하기 위해 Vue Router라는 공식 라우팅 라이브러리를 제공합니다. 이번 포스팅에서는 Vue Router의 기본 개념과 사용법을 소개하고, SPA(Single Page Application) 라우팅을 구현하는 방법을 실제 예제와 함께 살펴보겠습니다.

Vue Router
Vue Router

Vue Router란 무엇인가요?

Vue Router는 Vue.js 애플리케이션에서 라우팅을 관리하는 데 사용되는 공식 라우팅 라이브러리입니다. 이를 사용하면 Vue.js 애플리케이션을 여러 페이지로 구성하고, 페이지 간의 전환 및 네비게이션을 손쉽게 다룰 수 있습니다. Vue Router를 통해 SPA를 만들면 페이지 새로고침 없이 화면을 업데이트할 수 있어 빠른 사용자 경험을 제공할 수 있습니다.

Vue Router 시작하기

Vue Router를 사용하려면 다음 단계를 따릅니다.

1. Vue Router 설치

Vue Router를 프로젝트에 추가하기 위해 npm 또는 yarn을 사용하여 설치합니다.

npm install vue-router
# 또는
yarn add vue-router

2. Vue Router 설정

Vue Router를 Vue.js 애플리케이션에 등록하고, 라우터 객체를 생성합니다.

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

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 라우트 설정
  ],
});

3. 라우트 설정

라우트 설정은 라우터 객체를 생성할 때 routes 배열 안에 정의됩니다. 각 라우트는 경로와 컴포넌트를 매핑합니다.

const routes = [
  {
    path: '/',
    component: Home, // 홈 페이지 컴포넌트
  },
  {
    path: '/about',
    component: About, // 어바웃 페이지 컴포넌트
  },
  // 다른 라우트 설정
];

const router = new VueRouter({
  routes,
});

4. 라우터 사용

Vue 컴포넌트에서 라우터를 사용하려면 <router-link>와 <router-view> 컴포넌트를 활용합니다.

  • <router-link>: 페이지 간의 링크를 생성합니다.
<router-link to="/">홈</router-link>
<router-link to="/about">어바웃</router-link>
  • <router-view>: 현재 화면에 표시할 컴포넌트를 렌더링합니다.
<router-view></router-view>

Vue Router 예제

간단한 Vue Router 예제로 시작해보겠습니다. 다음은 홈 페이지와 어바웃 페이지를 갖는 Vue.js 애플리케이션을 만들어보겠습니다.

프로젝트 구조

my-vue-router-app/
  - src/
    - components/
      - Home.vue
      - About.vue
    - views/
      - HomeView.vue
      - AboutView.vue
    - main.js
    - router.js
  - package.json
  - ...

Home.vue 컴포넌트

<template>
  <div>
    <h1>홈 페이지</h1>
    <p>이곳은 홈 페이지입니다.</p>
  </div>
</template>

About.vue 컴포넌트

<template>
  <div>
    <h1>어바웃 페이지</h1>
    <p>이곳은 어바웃 페이지입니다.</p>
  </div>
</template>

HomeView.vue 라우터 뷰

<template>
  <div>
    <router-link to="/about">어바웃 페이지로 이동</router-link>
    <router-view></router-view>
  </div>
</template>

AboutView.vue 라우터 뷰

<template>
  <div>
    <router-link to="/">홈 페이지로 이동</router-link>
    <router-view></router-view>
  </div>
</template>

router.js – 라우터 설정

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from './views/HomeView.vue';
import AboutView from './views/AboutView.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: HomeView,
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "home" */ './components/Home.vue'),
      },
    ],
  },
  {
    path: '/about',
    component: AboutView,
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "about" */ './components/About.vue'),
      },
    ],
  },
];

const router = new VueRouter({
  routes,
});

export default router;

main.js – 애플리케이션 엔트리 포인트

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

Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

위 예제에서는 vue-router를 사용하여 홈 페이지와 어바웃 페이지를 만들고, 각 페이지 간의 이동을 처리하고 있습니다. 또한 코드 스플리팅을 활용하여 각 컴포넌트를 비동기로 불러오도록 설정하였습니다.

결론

Vue Router를 사용하면 Vue.js 애플리케이션을 간단하게 싱글 페이지 애플리케이션(SPA)으로 구성할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 페이지 간의 전환을 부드럽게 처리할 수 있습니다.

이번 포스팅에서는 Vue Router의 기본 개념과 설정 방법을 예제와 함께 살펴보았습니다. Vue.js로 SPA를 개발하고자 한다면 Vue Router를 활용하여 보다 강력한 웹 애플리케이션을 만들어보세요!

Leave a Comment