[Vue] - 라우터(router)

Vue Router는 Vue.js 애플리케이션에서 페이지 간의 이동을 가능하게 해주는 공식 라우팅 라이브러리입니다. Vue.js로 단일 페이지 애플리케이션(SPA)을 만들 때, 각 URL에 맞는 컴포넌트(페이지)를 로드하고, 페이지 전환 시에도 전체 페이지를 새로 고침하지 않으면서 동적으로 화면을 갱신할 수 있도록 도와줍니다.

주요 개념

1. 라우트(Route)

라우트는 URL과 해당 URL에서 보여줄 컴포넌트를 매핑하는 역할을 합니다. Vue Router에서 각 URL 경로는 특정 컴포넌트와 연결됩니다.

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

• /: 홈 화면을 의미하며 Home 컴포넌트를 표시.
• /about: "About" 페이지를 의미하며 About 컴포넌트를 표시.

2. 라우터(Router)

라우터는 라우트를 정의하고 관리하는 객체입니다. VueRouter 클래스를 사용해 라우터를 생성하며, 이 라우터를 Vue 인스턴스에 연결합니다.

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 // 위에서 정의한 라우트를 전달
});

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

3. 라우터 뷰(Router View)

<router-view>는 라우트에 의해 로드된 컴포넌트를 표시하는 자리 표시자 역할을 합니다. URL에 따라 어떤 컴포넌트를 보여줄지 결정되며, App.vue 파일 같은 상위 컴포넌트에서 사용됩니다.

<template>
  <div id="app">
    <router-view></router-view>  <!-- URL에 따라 컴포넌트가 렌더링되는 곳 -->
  </div>
</template>

4. 라우터 링크(Router Link)

<router-link>는 페이지 간의 이동을 위한 링크를 생성하는 컴포넌트입니다. HTML의 <a> 태그처럼 작동하지만, 페이지 새로 고침 없이 Vue의 라우터를 통해 다른 페이지로 이동할 수 있게 합니다.

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

• to 속성은 이동하고자 하는 URL 경로를 지정합니다.

5. 동적 라우팅(Dynamic Routing)

동적 라우팅을 사용하면 URL 경로에 변수를 포함하여 각기 다른 데이터를 가진 페이지를 렌더링할 수 있습니다. 주로 ID나 특정 항목을 다룰 때 유용합니다.

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

위 코드에서 :id는 동적 세그먼트를 의미하며, 사용자가 /user/1 또는 /user/2 같은 경로로 이동할 때 각각 다른 id 값을 받아들입니다.

• 컴포넌트 내에서 해당 동적 값을 얻으려면 this.$route.params.id를 사용합니다.

export default {
  mounted() {
    console.log(this.$route.params.id);  // URL의 동적 파라미터 id 값을 출력
  }
};

6. 프로그램적 네비게이션

<router-link> 대신 JavaScript 코드로도 경로를 이동할 수 있습니다. 이를 프로그램적 네비게이션이라고 하며, this.$router.push() 메서드를 사용합니다.

methods: {
  goToAbout() {
    this.$router.push('/about');  // About 페이지로 이동
  }
}

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

Vue Router는 페이지 이동 전이나 후에 특정 작업을 수행할 수 있는 네비게이션 가드를 제공합니다. 이 기능은 사용자가 로그인이 필요한 페이지에 접근할 때, 인증 여부를 확인하는 데 유용합니다.

• 글로벌 가드: 모든 라우팅 전후에 동작합니다.

  router.beforeEach((to, from, next) => {
    if (to.path === '/dashboard' && !isLoggedIn()) {
      next('/login');  // 로그인 안 된 경우 로그인 페이지로 리다이렉트
    } else {
      next();  // 계속해서 페이지로 이동
    }
  });
  

• 개별 라우트 가드: 특정 라우트에만 가드를 설정할 수 있습니다.

  const routes = [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (!isLoggedIn()) next('/login');
        else next();
      }
    }
  ];
  

8. 라우터 모드

Vue Router는 두 가지 모드를 지원합니다.

• 해시 모드: 기본값으로 URL에 #가 포함되며, 브라우저 히스토리 API를 사용하지 않고 URL 변경을 감지합니다.
  • 예: http://example.com/#/about
• 히스토리 모드: HTML5 히스토리 API를 사용하여 # 없이 깨끗한 URL을 제공합니다. 단, 서버 설정에서 적절한 처리가 필요합니다.
  • 예: http://example.com/about

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

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

Vue Router는 하나의 페이지 안에 여러 컴포넌트를 중첩시킬 수 있는 기능을 제공합니다. 이를 통해 복잡한 레이아웃을 쉽게 관리할 수 있습니다.

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

• User 컴포넌트 안에서 <router-view>를 추가하면, 하위 라우트의 컴포넌트가 렌더링됩니다.

결론

Vue Router는 Vue.js로 단일 페이지 애플리케이션을 개발할 때 필수적인 라우팅 솔루션입니다. 각 URL에 맞는 컴포넌트를 매핑하고, 페이지 간의 이동을 처리하며, 다양한 고급 기능(네비게이션 가드, 동적 라우팅, 중첩된 라우트 등)을 제공합니다. Vue Router를 사용하면 SPA에서 더 직관적이고 깔끔한 라우팅 경험을 구현할 수 있습니다.