Vue.js 프레임워크는 단일 페이지 애플리케이션 개발을 위한 Vue Router를 제공합니다. Vue Router는 브라우저의 URL을 사용하여 애플리케이션의 다른 화면을 표시하고, 컴포넌트 간의 연결 및 관리를 할 수 있습니다. 이번 글에서는 Vue Router를 사용하여 UI 라우팅을 구현하는 방법에 대해 알아보겠습니다.

Vue Router 설치

Vue Router를 사용하기 위해서는 먼저 프로젝트에 Vue Router를 설치해야 합니다. npm을 사용한다면 아래 명령어로 Vue Router를 설치할 수 있습니다.

npm install vue-router

Vue Router 설정

Vue Router를 프로젝트에 추가한 후, main.js 파일에서 Vue Router를 설정해야 합니다. 아래는 간단한 Vue Router 설정 예제입니다.

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

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

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

위의 예제에서는 vue-router를 불러와서 Vue에 등록하고, Home 및 About 컴포넌트에 대한 경로를 설정하였습니다.

템플릿에 라우팅 추가

라우팅을 설정한 후에는 템플릿에서 해당 라우팅을 사용할 수 있습니다. router-link를 사용하여 네비게이션을 생성할 수 있습니다. 아래는 간단한 네비게이션 예제입니다.

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

라우팅 가드

라우팅 가드를 사용하여 특정 라우트로의 접근을 제어할 수 있습니다. 이를 통해 로그인 여부 확인 등 보안 관련 로직을 간단히 구현할 수 있습니다.

router.beforeEach((to, from, next) => {
  // 로그인 여부 확인 등 로직 수행
  next()
})

Vue Router를 사용하여 UI 라우팅을 구현하는 방법에 대해 간단히 살펴보았습니다. 더 자세한 내용은 Vue Router의 공식 문서를 참고하시기 바랍니다.