[Vue.js] Vue Router

이번엔 Vue에서 공식으로 라우팅을 담당하는 Vue Router에 대해 공부해보았다.

Vue 역시 SPA 웹 어플리케이션 제작을 위한 프레임워크로, URL에 따른 페이지 컴포넌트 간의 라우팅을 지원할 것으로 예상된다.

또한, React 경우엔 필요한 기능을 수동적으로 추가했지만, Vue Router는 공식 라이브러리인 만큼 params, query 나 페이지 인터렉션 등 다양한 기능을 지원한다고 한다.

 

* 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다.

---

💚 Vue Router

위에서 언급했듯, Vue Router는 Vue.js 공식 라우터 라이브러리다. SPA를 쉽게 구현하기 위해 코어와 긴밀하게 통합되어있다.

 

- 기능

Vue 라우터 공식문서에서 소개하는 Vue 라우터의 주요기능들이다.

• 중첩된 라우트/뷰 매핑
• 모듈화된, 컴포넌트 기반의 라우터 설정
• 라우터 파라미터, 쿼리, 와일드카드
• Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과
• 세밀한 네비게이션 컨트롤
• active CSS 클래스를 자동으로 추가해주는 링크
• HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백)
• 사용자 정의 가능한 스크롤 동작

 

- 설치

// CDN
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

// NPM
npm install vue-router

Vue Router는 위처럼, Vue.js CDN 다음으로 설치하거나 NPM CLI를 통해 설치하는 방법이 있다.

 

- 설정(연결)

<template>
  <div id="app">
    <section>
      <router-link to="/login">Login</router-link>
      <router-link to="/main">Main</router-link>
    </section>
    <router-view></router-view>
  </div>
</template>

<script>
  var router = new VueRouter({
    // 페이지의 라우팅 정보 : array
    routes : [
      {
        path: '/login',
        component: LoginComponent,
      },
      {
        path: '/main',
        component: MainComponent,
      },
    ],
  });

  new Vue({
    el: "#app",
    router: router,		// Vue Router 연결
  });
<script>

 

1. router-view : url path값에 따라 페이지 컴포넌트를 라우팅해주는 조상 태그 (= React <Routes>태그)

• Vue 인스턴스에 router 필드를 설정한다. 여기의 필드값에 router를 연결해주면 된다.
• router는 new VueRouter() 인스턴스를 통해 만들 수 있다. 여기에 routes 값이 배열형태로 포함되며, url과 해당경로에서 표현할 페이지 컴포넌트들이 담긴다.
• 위에서 설정한 라우터는 Vue 인스턴스 내에서 유효하다. 단, <router-view> 라는 태그로 랩핑해줘야 한다.

 

2. router-link : 연결된 url path로 이동시켜주는 <a>태그. (= React <Link>태그)

• <router-link> 태그를 통해 연결된 url 주소로 라우팅할 수 있다. 컴파일 시, <a> 태그로 변환된다.
• to 속성에 path값을 입력해주면, 해당 태그 클릭시 그 주소로 라우팅된다.
• tip! to="path/detail" 처럼 붙이면 현재 url에 이 path가 붙고, to="/path/detail" 처럼 붙이면 default url에 붙음 (후자 대표적)

 

- Named Views

위에서 나왔던 url 주소에 따라 다른 페이지 컴포넌트를 보여주는 것을 Nested Router라고 한다.

이와는 달리, 특정 url 주소에 여러 컴포넌트들을 영역별로 지정하여 렌더링하는 것을 Named View 라고 한다.

(Header, Footer 등을 구성하는데 이점이 있을 것으로 생각된다.)

// template
<div id="app">
  <router-view name="appHeader"></router-view>
  <router-view></router-view>
  <router-view name="appFooter"></router-view>
</div>

// script : Vue instance
{
  path : '/home',
  // Named Router
  components: {
    appHeader: AppHeader,
    default: Body,
    appFooter: AppFooter
  }
},

출처 : https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

 

- Hash Mode vs History Mode

Vue Router의 기본모드는 "Hash Mode" 이다. url 해시를 사용하므로, 변경될 때마다 페이지가 리로드되지 않는다.

http://www.root.com/#/user

 

"History Mode"를 설정하게 되면 url이 정상적으로 보여진다.

또한, url 주소로 서버에 리소스를 요청하기 때문에 해당값이 존재한다면 반환, 그렇지 않다면 404 에러를 발생시킨다.

* 이런 경우를 대비해, 서버(Node.js, Express)에서 connect-history-api-fallback 미들웨어로 방지할 수 있다.

// 설정
new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    //...
  ],
});

http://www.root.com/user

 

 

💚 Router 의 기능적 분리

main.js 에 Router 선언부가 혼용되면 메인의 의미가 퇴색될뿐더러, 규모가 큰 프로젝트는 페이지만큼 router도 길어질 것이다.

이를 분리해서 관리하기 위해, /src/router 디렉토리를 별도로 만들어서 여기에서 VueRouter 인스턴스를 선언 및 모듈화한다. 

// /router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import NewsView from '../views/NewsView.vue'
import JobsView from '../views/JobsView.vue'
import AskView from '../views/AskView.vue'
import UserView from '../views/UserView.vue'
import DetailView from '../views/DetailView.vue'

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: '/',
      redirect: '/news'
    },
    {
      path: '/news',
      component: NewsView
    },
    {
      path: '/jobs',
      component: JobsView
    },
    {
      path: '/ask',
      component: AskView
    },
    {
      path: '/user',
      component: UserView,
    },
    {
      path: 'detail',
      component: DetailView,
    },
  ]
})

export default router;

---

💚 동적 라우팅 (Dynamic Routing)

통상, 리스트 페이지에서 특정 정보를 클릭하면 상세 페이지로 이동할 때 많이 사용되는 기법이다.

Vue Router의 내장기능 및 메서드를 통해, API 통신에 필요한 값(통상 id)을 기반으로 한 Dynamic Routing이 가능해진다.

// router/index.js

// ...
    {
      path: '/user/:id',
      component: UserView,
    },

router의 일부이다. path 값을 이처럼 :[value] 를 통해 설정할 수 있다. 이 경로를 통해서만, UserView 페이지 컴포넌트가 렌더된다.

 

// list.vue

// ...
<router-link :to="`/user/${item.user}`" class="userlink">{{ item.user }}</router-link>

list 페이지의 <router-link> 태그를 제작하여, 이를 클릭함으로서 위 path(경로)로 라우팅되게 설정해준다.

item의 id정보를 JS문법으로 적용해야 하므로, 그냥 to가 아닌 :to(v-bind 약식문법)을 통해 JS형태로 경로값을 전달한다. 

 

// detail.vue

// ...
  created() {
    console.log(this.$route);
    const userName = this.$route.params.id;
    this.fetchUserDetail(userName);
  }

 

detail 페이지는, $route 메서드를 통해 현재 라우팅 정보를 가져온다. (아래 사진은 this.$route 에 담기는 각종 정보들이다.)

여기서 params 필드를 참조하면 우리가 router에 설정한 :id값이 존재하는 것을 알 수 있다.

 

이  뿐만 아니라 name을 통해 현재 path를 명명하거나, params, query 등을 반영하여 서버요청 등 추가로직을 작성하면 된다. 

 

---

💚 라우터 트랜지션 (Router Transition)

우리 회사 서비스의 경우에도, 다른 페이지(라우트)로 전환될 때 페이지가 슬라이드 쇼처럼 밀리면서 동적으로 이동된다.

이러한 트랜지션을 Vue Router 에서 API로 기본적으로 제공하며, 이를 라우터 트랜지션이라고 한다.  

* 공식문서(링크) : https://router.vuejs.org/kr/guide/advanced/transitions.html

<transition name="fade">
  <router-view class="main"></router-view>
</transition>

/* CSS : Router Transition */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

먼저, <transition> 태그로 <router-view>를 감싼다. 그리고 여기에 name 값을 부여한다. (이 name을 기반으로 클래스를 준다.)

여기에 트랜지션 클래스(.[name]-enter, .[name]-enter-active, .[name]-leave-to 등) 를 설정해주면 되는 것이다.

 

---

Vue 문법들이 참 생소한 한편, React와 React-Router를 알고 있으니 상호간의 대조를 통해 쉽게 이해할 수 있긴 하다.

(<router-view> 와 <Routes>, <router-link> 와 <Link> 가 그렇다. 특히, 링크 태그는 to="/path" 속성까지 같다!)

 

왜 React, Vue, Angular 중 하나를 알면 다른 것을 쉽게 배울 수 있는지 새삼 느끼게 된 한편,

Vue Router가 조금더 다양한 기능(Named Views, History Mode 등)을 지원하는 것을 보며 프레임워크의 우월함을 체감했다.

 

[출처]

- 캡틴판교 님의 블로그 : https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/  

- Vue Router 공식문서 : https://router.vuejs.org/kr/guide/

- humans 님의 블로그(Hash vs History) : https://happy-coding-day.tistory.com/128