[javascript] Vue Router를 이용한 SPA 개발 방법

18 Dec 2023

javascript

Vue.js는 유연하고 강력한 기능을 갖춘 프론트엔드 프레임워크입니다. Vue Router를 사용하면 Vue.js 애플리케이션에 간단하고 직관적인 라우팅을 구현할 수 있습니다. 이 블로그에서는 Vue Router를 사용하여 Single Page Application (SPA)를 개발하는 방법에 대해 알아보겠습니다.

Vue Router 소개

Vue Router는 Vue.js 애플리케이션을 위한 공식 라우팅 라이브러리로, 화면 간 전환 및 기타 라우팅 기능을 지원합니다. 이를 통해 사용자 경험을 향상시키고, SPA 개발을 보다 간편하게 할 수 있습니다.

Vue 애플리케이션에 Vue Router 추가

먼저, Vue 프로젝트에 Vue Router를 추가해야 합니다. 이를 위해 npm 또는 yarn을 사용하여 Vue Router 패키지를 설치하고, 설치한 후에 Vue 애플리케이션에 Vue Router를 등록해야 합니다.

npm install vue-router

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 라우팅 구성
  ]
})

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

라우팅 구현

Vue Router를 사용하여 라우팅을 구현하려면 routes 배열에 각 경로에 대한 구성을 정의해야 합니다. 각 라우팅 구성은 경로에 따라 표시될 컴포넌트를 지정하는 등의 속성을 포함합니다.

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

파라미터 전달

라우팅을 통해 파라미터를 전달하여 동적인 컨텐츠를 표시할 수 있습니다. 예를 들어, 사용자의 ID를 전달하여 해당 사용자의 프로필을 표시할 수 있습니다.

const routes = [
  { path: '/user/:id', component: UserProfile }
]

네스티드 라우팅

Vue Router를 사용하면 중첩된 라우팅을 구현할 수 있습니다. 부모 레이아웃과 자식 뷰를 가지는 네스티드 라우팅은 복잡한 애플리케이션 레이아웃을 구현하는 데 유용합니다.

이동 가드 구현

이동 가드는 네비게이션을 허용하거나 취소하는 데 사용되는 라우터 훅입니다. 예를 들어, 사용자가 인증되지 않은 경우 특정 경로로의 접근을 막을 수 있습니다.

const router = new VueRouter({
  routes: [
    { path: '/admin', component: Admin, beforeEnter: requireAuth }
  ]
})

function requireAuth (to, from, next) {
  // 사용자 인증 여부 확인 로직
}

이제 Vue Router를 사용하여 더욱 동적이고 강력한 SPA를 개발할 수 있게 되었습니다. Vue Router의 공식 문서를 참고하여 더 많은 기능과 옵션에 대해 알아보세요.

참고: Vue Router 공식 문서

위의 예제에서는 Vue Router를 사용하여 SPA의 라우팅을 구현하는 방법을 살펴보았습니다. Vue Router를 활용하면 간단한 페이지 이동부터 복잡한 네스티드 라우팅 및 이동 가드까지 다양한 라우팅 기능을 구현할 수 있습니다. Vue.js 애플리케이션을 개발할 때 Vue Router를 효과적으로 활용하여 사용자 경험을 향상시키고, 개발 생산성을 높일 수 있습니다.

목차