Vue Router란?

Vue Router란?

 

Vue Router는 Vue.js 애플리케이션에서 라우팅을 관리하는 공식 라이브러리입니다.

라우팅이란 사용자가 특정 URL을 요청했을 때, 그 URL에 맞는 페이지나 컴포넌트를 제공하는 기능을 말합니다.

Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)에서 페이지 간 네비게이션을 쉽게 구현할 수 있습니다.

 

주요 개념과 기능

 

1. 라우터(Router)

Vue Router는 createRouter 함수를 사용하여 라우터 인스턴스를 생성합니다. 이 라우터 인스턴스는 애플리케이션의 경로(라우트)와 해당 경로에 연결된 컴포넌트들을 정의하는 곳입니다.

 

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

위 코드에서 routes는 경로와 그 경로에 연결된 컴포넌트들의 배열입니다. 이 배열은 경로와 해당 경로에 접근할 때 표시할 컴포넌트를 매핑합니다.

 

2. 라우트(Route)

라우트는 URL과 해당 URL에서 렌더링할 컴포넌트를 매핑하는 객체입니다. 예를 들어, /about 경로에 접근하면 About 컴포넌트가 렌더링됩니다.

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

 

3. 라우터 히스토리 모드(History Mode)

Vue Router는 기본적으로 Hash 모드와 HTML5 History 모드를 지원합니다.

• Hash 모드: URL에 #을 포함하여 경로를 구분합니다. 예: http://example.com/#/about. 브라우저에서 URL의 해시 부분은 서버로 전달되지 않기 때문에, 서버 측에서 추가 설정이 필요 없습니다.

• HTML5 History 모드: URL에 해시(#) 없이 깔끔한 경로를 제공합니다. 예: http://example.com/about. 이 모드를 사용할 경우 서버 측 설정을 통해 모든 경로를 index.html로 리디렉션하도록 해야 합니다.

const router = createRouter({
  history: createWebHistory(), // HTML5 History 모드
  routes
})

 

4. 라우터 뷰(Router View)

router-view는 현재 활성화된 경로에 맞는 컴포넌트를 표시하는 Vue의 내장 컴포넌트입니다. 애플리케이션에서 이 컴포넌트를 어디에 두느냐에 따라, 해당 위치에 라우터에 의해 결정된 컴포넌트가 렌더링됩니다.

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

 

5. 라우터 링크(Router Link)

router-link는 다른 페이지나 컴포넌트로 네비게이션할 수 있는 링크를 만드는 Vue의 내장 컴포넌트입니다. 이를 사용하면 HTML의 <a> 태그처럼 작동하지만, SPA 특성상 페이지 전체를 다시 로드하지 않고도 URL을 변경할 수 있습니다.

 

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

 

6. 동적 라우트 매칭(Dynamic Route Matching)

동적 라우트 매칭은 URL 경로의 일부를 변수로 처리하여, 다양한 URL 패턴에 대해 하나의 컴포넌트를 사용할 수 있게 합니다. 예를 들어, 블로그 포스트 페이지를 생각해 볼 수 있습니다.

const routes = [
  { path: '/posts/:id', component: PostDetail }
]

여기서 :id는 동적 세그먼트로, 실제로는 posts/1, posts/2 등의 URL이 이 경로와 매칭됩니다. 이 id는 props나 this.$route.params를 통해 컴포넌트에서 접근할 수 있습니다.

 

7. 네비게이션 가드(Navigation Guards)

네비게이션 가드는 특정 경로에 접근하기 전에 실행되는 함수로, 라우팅을 허용할지, 막을지, 또는 리다이렉트할지를 결정합니다. 이를 통해 인증이 필요한 페이지에 대한 접근을 제어할 수 있습니다.

• 전역 가드: 모든 경로 변경에 대해 적용됩니다.

• 라우트별 가드: 특정 라우트에만 적용됩니다.

• 컴포넌트 내 가드: 컴포넌트 내에서 정의되고, 해당 컴포넌트가 활성화될 때 적용됩니다.

router.beforeEach((to, from, next) => {
  if (to.path === '/protected' && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

 

8. 중첩된 라우트(Nested Routes)

Vue Router는 중첩된 라우트를 지원합니다. 이는 라우트가 중첩된 컴포넌트를 렌더링할 수 있도록 해줍니다.

const routes = [
  { 
    path: '/user/:id', 
    component: User,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

이 경우, UserProfile이나 UserPosts 컴포넌트는 User 컴포넌트의 내부에 렌더링됩니다.

 

결론

 

Vue Router는 Vue.js 애플리케이션에서 페이지 간 이동을 관리하고, URL을 통해 상태를 관리할 수 있는 강력한 도구입니다. 이를 통해 SPA에서의 복잡한 네비게이션 구조를 간편하게 관리할 수 있으며, 사용자 경험을 향상시키는 데 매우 유용합니다. Vue Router를 잘 이해하고 사용하면, Vue.js 애플리케이션의 네비게이션과 상태 관리를 훨씬 더 효율적으로 수행할 수 있습니다.