[javascript] Vue Router의 속성들과 사용법

18 Dec 2023

javascript

Vue Router는 Vue.js 애플리케이션을 위한 공식 라우팅 라이브러리입니다. 이 라이브러리를 사용하여 Vue 애플리케이션에서 페이지간의 전환 및 라우팅을 관리할 수 있습니다. Vue Router의 주요 속성과 사용법에 대해 알아보겠습니다.

Vue Router 설치

Vue Router를 사용하려면 먼저 Vue 프로젝트에 해당 라이브러리를 설치해야 합니다. 아래 명령을 사용하여 Vue Router를 프로젝트에 추가합니다.

npm install vue-router

또는

yarn add vue-router

라우트 정의

Vue Router를 사용하여 애플리케이션 내에서 다양한 경로에 대한 라우트를 정의할 수 있습니다. 예를 들어, 다음과 같이 간단한 라우트를 정의할 수 있습니다.

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

위 예제에서는 홈, 어바웃, 컨택트 페이지에 대한 라우트를 정의했습니다.

라우팅 방법

라우팅은 Vue Router를 사용하여 다른 페이지로 이동하는 것을 의미합니다. router-link를 사용하여 내부 링크를 만들고, router.push를 사용하여 프로그래밍 방식으로 라우팅할 수 있습니다.

예를 들어, 다음은 router-link를 사용한 내비게이션의 예입니다:

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

그리고 다음은 프로그래밍 방식으로 라우팅하는 예입니다:

this.$router.push('/about')

동적 라우팅

동적 라우팅을 사용하여 동적으로 URL을 생성하고 데이터를 로드할 수 있습니다. 이를 위해 Vue Router에서는 :id나 :username과 같은 동적 세그먼트를 사용할 수 있습니다.

{ path: '/user/:id', component: User }

위 코드에서 :id는 동적으로 변하는 사용자 ID를 나타냅니다.

네스트드/중첩된 라우트

중첩된 라우트는 중첩된 레이아웃을 구성하여 여러 단계의 레이아웃을 표현할 수 있는 기능을 제공합니다.

{
  path: '/user',
  component: User,
  children: [
    {
      path: 'profile',
      component: Profile
    },
    {
      path: 'settings',
      component: Settings
    }
  ]
}

위 코드에서는 /user 경로에 Profile 및 Settings 컴포넌트를 중첩하여 라우팅합니다.

라우터 네비게이션 가드

라우터 네비게이션 가드를 사용하여 라우터의 전환을 감지하고 차단 또는 재작업할 수 있습니다. 이를 통해 인증 및 권한 확인을 수행할 수 있습니다.

router.beforeEach((to, from, next) => {
  // 인증 확인 로직
  if (requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

위 코드는 beforeEach 가드를 사용하여 인증이 필요한 페이지에서 로그인 여부를 확인하고, 로그인되지 않은 경우 로그인 페이지로 리디렉션합니다.

라우터 속성

Vue Router에는 라우터에 대한 다양한 속성이 있으며, 이를 통해 라우팅 및 전체 라우터의 동작을 제어할 수 있습니다. 예를 들어, mode, base, linkExactActiveClass 등 많은 속성들이 있습니다.

이는 Vue Router의 많은 기능 중 일부에 불과합니다. Vue Router의 자세한 내용은 Vue Router 공식 문서에서 확인할 수 있습니다.

이상으로 Vue Router의 주요 속성과 사용법에 대해 알아보았습니다. Vue Router를 사용하여 Vue 애플리케이션에서 강력하고 유연한 라우팅을 구현할 수 있습니다.

이 글은 Vue Router의 속성과 사용법에 대한 간략한 소개이며, 더 자세한 정보 및 예제는 Vue Router 공식 문서를 참고하시기 바랍니다.

목차