Vue Router 라우터를 이용한 네비게이션 제어하기!

 

 

안녕하세요!

 

오늘은 Vue의 핵심 기능 중 하나인 Router에 초점을 맞춰서 내용을 정리해보려고 합니다. Vue와 은 Single Page Application(SPA) 개발을 할 때, 웹 페이지 간의 전환과 네비게이션을 관리하는 데에 라우터 처리는 필수적인 요소입니다. 따라서 이번 포스팅에서는 Vue Router에 대한 기본 개념과 활용 방법을 자세히 알아보도록 하겠습니다.

 

 

---

Vue 라우터란?

Vue 라우터는 Vue.js 애플리케이션에서 화면 전환과 네비게이션을 관리하는 라이브러리입니다. SPA(Single Page Application)에서 여러 페이지를 다룰 때 사용되며, URL을 기반으로 컴포넌트를 동적으로 로딩하고 표시하는 역할을 합니다.

라우터를 사용하면 URL 경로에 따라 특정 컴포넌트를 보여주고, 사용자가 웹 페이지를 이동할 때 화면 간의 전환을 부드럽게 처리할 수 있습니다. Vue 라우터는 브라우저의 주소 표시줄이나 링크를 통해 간단하게 제어할 수 있는데, 이를 통해 사용자 경험을 향상시킬 수 있습니다.

주요 개념으로는 라우트(Route)와 라우트 컴포넌트(Route Component), 라우터 인스턴스(Router Instance) 등이 있으며, 이들을 통해 URL과 컴포넌트를 매핑하고 관리할 수 있습니다. Vue 라우터의 강력한 기능을 활용하면 다양한 화면 전환과 네비게이션 패턴을 구현할 수 있습니다.

 

 

---

Vue 라우터 설정하기

 

1. 라우터 설치 및 설정

가장 먼저 vue 프로젝트에서 Vue Router를 설치합니다. 아래와 같이 터미널에서 명령을 실행을 합니다.

npm install vue-router

설치가 완료되면 src 폴더 내에서 router 폴더를 생성하고, 그 안에 index.js 파일을 생성합니다.

 

 

2. 라우터 설정 예시 코드

router/index.js 파일을 열고 아래와 같이 라우터 설정을 합니다.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

위의 소스 코드에서는 vue-router를 가져와서 사용하고, routes 배열에 라우트 정보를 정의합니다. path는 URL 경로, name은 라우트 이름, component는 해당 URL에 매핑되는 컴포넌트를 지정합니다.

예시로 Home.vue와 About.vue라는 컴포넌트를 생성하여 해당 경로에 매핑하면 됩니다.

 

 

3. 라우터 사용

Vue 프로젝트 내의 main.js 파일에서 라우터를 추가하도록 합니다.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

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

이제 Vue Router가 설정되었으며, router-link나 router-view 등을 사용하여 라우터를 활용할 수 있습니다.

 

 

---

동적 라우팅과 매개변수 처리

 

1. 동적 라우팅 설정

동적 라우팅은 URL 경로에 변수를 사용하여 동적으로 컴포넌트를 매핑하는 것을 의미합니다. 예를 들어, /user/:id와 같은 경로가 있다면 id 부분이 동적으로 변할 수 있습니다.

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
];

 

 

2. 매개변수 활용

동적 라우팅을 통해 전달되는 매개변수는 $route.params를 통해 접근할 수 있습니다. 예시 코드를 통해 설명해보겠습니다.

<template>
  <div>
    <h2>User Profile</h2>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

위 코드에서 {{ $route.params.id }} 부분은 URL에서 전달된 id 매개변수 값을 보여줍니다.

 

 

3. 링크 생성

동적 라우팅을 사용할 때, 링크를 생성할 때도 router-link를 활용하여 동적 매개변수를 설정할 수 있습니다.

<router-link :to="{ name: 'User', params: { id: 123 }}">User 123</router-link>

위 코드에서 to 속성을 통해 경로와 매개변수를 설정하여 링크를 생성할 수 있습니다.

 

 

4. 동적 라우팅과 라우트 감시

동적 라우팅을 사용할 때 컴포넌트가 변경되면 해당 컴포넌트의 beforeRouteUpdate와 watch 속성을 통해 라우트의 변경을 감시하고 필요한 작업을 수행할 수 있습니다.

beforeRouteUpdate(to, from, next) {
  // 라우트 변경 시 수행할 작업
  next();
}

 

 

---

중첩 라우터

 

1. 중첩 라우터 설정

중첩 라우터는 한 라우트 안에 다른 라우트를 중첩하여 사용하는 것을 의미합니다. 이를 통해 다양한 레이아웃을 구성하거나 부모-자식 관계의 컴포넌트를 구성할 수 있습니다.

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: '',
        component: UserHome
      },
      {
        path: 'profile',
        component: UserProfile
      },
      // 더 많은 중첩 라우트 설정
    ]
  }
];

 

 

2. 중첩 라우트 사용

위의 예시에서 UserLayout 컴포넌트 내에서 <router-view></router-view>를 사용하면 중첩된 컴포넌트가 렌더링 됩니다.

<template>
  <div>
    <h2>User Layout</h2>
    <router-view></router-view>
  </div>
</template>

 

 

3. 중첩 라우트와 컴포넌트 감시

중첩된 컴포넌트에서도 beforeRouteUpdate와 watch를 사용하여 라우트 변경을 감시하고 작업을 수행할 수 있습니다.

beforeRouteUpdate(to, from, next) {
  // 중첩 라우트 변경 시 수행할 작업
  next();
}

중첩 라우터를 사용하면 복잡한 레이아웃이나 화면 구조를 쉽게 구성할 수 있습니다. 부모 컴포넌트와 자식 컴포넌트 간의 상호작용을 효율적으로 구현할 수 있는 장점이 있습니다.

 

 

---

라우트 메타 데이터 활용

라우트 메타 데이터는 라우트에 대한 부가적인 정보를 담는 데 사용되며, 특정 페이지나 인증 상태 등과 관련된 정보를 저장하고 활용할 수 있습니다.

 

 

1. 라우트 메타 데이터 정의

라우트 정의 시 meta 속성을 사용하여 메타 데이터를 정의합니다.

const routes = [
  {
    path: '/public',
    component: PublicPage,
    meta: { requiresAuth: false } // 메타 데이터 정의
  },
  {
    path: '/private',
    component: PrivatePage,
    meta: { requiresAuth: true }  // 메타 데이터 정의
  }
];

 

 

2. 라우트 가드 활용

라우트 가드를 통해 라우트 메타 데이터를 활용할 수 있습니다. beforeEach 라우트 가드에서 메타 데이터를 확인하고 필요한 동작을 수행할 수 있습니다.

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    // 로그인이 필요한 페이지에 접근 시 로그인 페이지로 이동
    next('/login');
  } else {
    next();
  }
});

 

 

3. 컴포넌트에서 접근

라우트 컴포넌트 내부에서 this.$route.meta를 통해 메타 데이터에 접근할 수 있습니다.

export default {
  created() {
    if (this.$route.meta.requiresAuth) {
      // 로그인이 필요한 페이지에서만 실행될 동작
    }
  }
};

 

 

라우트 메타 데이터는 특정 라우트나 페이지에 대한 추가 정보를 저장하고 활용할 수 있습니다. 이를 통해 인증, 권한, 레이아웃 설정 등과 관련된 작업을 효율적으로 구현할 수 있습니다.

 

 

---

최종 정리

 

오늘은 Vue Router에 대한 기본적인 개념과 간단한 사용 방법에 대해서 정리해 보았습니다. Vue Router는 Vue 애플리케이션에서 페이지 간의 이동과 관련된 부분을 매우 용이하게 다룰 수 있는 강력한 도구입니다. 라우트의 설정과 활용, 그리고 메타 데이터 활용까지 살펴보았는데요. SPA 개발을 하면서 라우터를 다루는 것은 매우 중요하기 때문에 한 번씩 정리하고 복습하는 것이 좋습니다.

 

 

그럼 다음 포스팅에도 Vue의 기본적인 주제들을 가지고 정리해 보도록 하겠습니다.

감사합니다!