Vue.js는 사용자 인터페이스를 만들기 위한 프론트엔드 프레임워크로, Vue Router는 Vue 애플리케이션의 라우팅을 관리하기 위한 공식 라이브러리입니다. Vue Router를 사용하여 페이지 간의 전환을 관리하는 방법을 살펴보겠습니다.

Vue Router 설치

먼저 Vue 프로젝트에 Vue Router를 설치해야 합니다. 프로젝트 디렉터리에서 다음 명령을 사용하여 Vue Router를 설치합니다.

npm install vue-router

라우터 설정

라우터를 설정하려면 VueRouter를 import하고 사용할 라우트를 정의해야 합니다. 아래는 routes 객체를 사용하여 라우트를 정의하는 예제입니다.

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({
  routes
})

export default router

페이지 이동하기

라우터를 설정한 후에는 <router-link> 컴포넌트나 router.push 메서드를 사용하여 페이지를 이동할 수 있습니다.

<router-link> 컴포넌트 사용

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

router.push 메서드 사용

// SomeComponent.vue
methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

위의 예제 코드에서, router-link 컴포넌트를 사용하여 페이지 간의 이동을 구현하거나, 메서드 안에서 router.push를 사용하여 프로그래밍적으로 페이지를 이동할 수 있습니다.

이제 Vue Router를 사용하여 페이지 간의 이동을 손쉽게 관리할 수 있습니다. 페이지 이동에 대한 더 많은 옵션 및 기능을 원한다면 Vue Router의 공식 문서를 참조하시기 바랍니다.

참고 자료

• Vue Router 공식 문서