Path mapping (routing) - Vue Router

Router는 웹 페이지에서 자신이 원하는 어떤 지점에 페이지를 바꿔치기 하는 기능입니다. 예를 들자면, 웹 페이지의 상단 네비게이션 바는 그대로인 상태로 네비게이션 바 아래 있는 콘텐츠 영역만 사용자의 행동에 따라 변화 하는 기능 입니다.

VueJS를 사용중이라면 router.js 모듈에 관해 관심이 생길 것입니다. nuxt.js를 사용하는 분도 계시겠지만 VueJS에서 추천하고 있기도 하고 기본 공식 라우터가 Router로 되어 있기 때문에 더더욱 그러하죠. 저도 VueJS를 이용할 때는 router.js를 함께 이용합니다.

Vue router 가 가진 기능

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

Vue router 설치

VueRouter를 설치하기 위한 몇가지 방법이 있습니다. 이 글을 보는 분들이라면 아마도 @vue/cli를 사용하지 않을까 하고 생각되지만 아닌 분들도 있을지 몰라 다른 방법도 함께 알려드립니다. 아래 3가지 방법을 보시고 자신에게 맞는 방법을 사용하여 설치하세요.

javascript 직접 삽입

다른 개발 도구의 도움을 받지 않고 직접 삽입하는 분들입니다. 어쩌면 vue를 처음 시도하는 분들이거나 이미 가지고 잇는 다른 프레임워크등이 있어 조금씩 적용해 나가고 싶은 분들이라면 이 방법이 더 좋을지도 모릅니다. 이러한 분들은 CDN의 주소를 이용하여 스크립트 src를 추가하거나 파일을 직접 내려받아 내려받은 경로를 추가해 주시면 됩니다. 최신 CDN 주소는 아래 링크를 사용하세요.

https://unpkg.com/vue-router/dist/vue-router.js

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

이와 같은 방법으로 vue.js를 추가한 이후에 추가해 주시면 자동으로 vue에서 사용할 수 있도록 설치됩니다.

그리고 CDN주소를 직접 링크하실 때는 version 업데이트가 자동으로 이루어 지기 때문에 문제가 발생할 수도 있습니다. 때문에 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js와 같이 버전을 명기해서 사용하시길 추천드립니다.

NPM을 이용하여 module 추가

npm 혹은 yarn을 사용하는 것에 이미 익숙한 분들이라면 지금 이내용은 이미 넘어 가셨을 거라 생각되지만 아직 사용이 익숙치 않은 분들도 많이 계실 것입니다. npm에 관련한 내용은 후에 따로 정리하기로 하고 우선 이용하는 내용만 다루겠습니다. console 명령창의 프로젝트 디렉토리로 들어가서 아래의 명령어를 통해 설치하세요.

npm install vue-router --save

이렇게 module을 설치하고 나면 Vue에서 사용하겠다는 사용 설정을 해 주어야 Vue 내부에서 이용 할 수 있습니다. 아래와 같이 Vue를 설정하는 스크립트 (보통 main.js 파일)에서 코드를 추가하여 설정해야 합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

vue-cli를 통한 설치

가장 간단하고 편리한 방법입니다. vue 프로젝트를 cli를 통해 생성하셨다면 이 방법이 가장 좋습니다. 설치와 동시에 사용 설정까지 자동으로 이루어 지도록 되어 있고 간단한 예제 파일도 만들어 주기 때문에 처음 프로젝트 사용에는 가장 적합합니다.

vue-cli를 통한 설치는 vue 프로젝트 디렉토리로 들어가서 명령창에 아래 명령어를 치면 됩니다.

vue add router

Vue Router 사용

vue router를 사용하는 방법은 매우 간단합니다. 하지만 복잡합니다. 간단은 사용이 간단하고 복잡은 관리하는 페이지들을 router에 등록해야 하기 때문입니다.

router component 지정

우선 라우팅 되기 원하는 곳에 <router-view></router-vuew> 태그를 넣어 컴포넌트를 끼워 줍니다. 그러면 라우터를 통해 링크되는 콘텐츠는 지정된 자리에서 변경될 것입니다.

그리고 변경되는 콘텐츠의 링크는 <router-link></router-link> 태그의 to="주소" 속성을 통해 지정됩니다.

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 네비게이션을 위해 router-link 컴포넌트를 사용합니다. -->
    <!-- 구체적인 속성은 `to` prop을 이용합니다. -->
    <!-- 기본적으로 `<router-link>`는 `<a>` 태그로 렌더링됩니다.-->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 라우트 아울렛 -->
  <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
  <router-view></router-view>
</div>

router를 통해 관리되는 콘텐츠 등록

위의 컴포넌트 등록만으로는 router가 제대로 동작하지 않습니다. /foo 주소가 어떤 콘텐츠를 가리키고 있는지 모르기 때문입니다. 그래서 그 내용을 등록해 주어야 합니다.

JSON 객체를 이용해 등록 하는 방법

아래는 JSON 객체를 만들어 path와 component 정보를 등록해서 사용하는 방법입니다. Vue를 정의하는 스크립트(보통 main.js) 파일에 이러한 방식으로 등록해 사용할 수 있습니다.

// 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 하세요
// 그리고 `Vue.use(VueRouter)`를 호출하세요

// 1. 라우트 컴포넌트를 정의하세요.
// 아래 내용들은 다른 파일로부터 가져올 수 있습니다.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 라우트를 정의하세요.
// Each route should map to a component. The "component" can
// 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
// "component"는 `Vue.extend()`를 통해 만들어진
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체입니다.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. `routes` 옵션과 함께 router 인스턴스를 만드세요.
// 추가 옵션을 여기서 전달해야합니다.
// 지금은 간단하게 유지하겠습니다.
const router = new VueRouter({
  routes // `routes: routes`의 줄임
})

// 4. 루트 인스턴스를 만들고 mount 하세요.
// router와 router 옵션을 전체 앱에 주입합니다.
const app = new Vue({
  router
}).$mount('#app')

이를 사용하는 예제를 https://jsfiddle.net/yyx990803/xgrjzsup/ 이곳에서 직접 소스와 동작을 테스트하고 보실 수 있습니다.

Module을 따로 만들어 등록하는 방법

vui-cli를 통해 설치하셨다면 이미 이 방법으로 등록이 되어 있습니다. 프로젝트 디렉토리에서 하위 디렉토리인 plugins를 보시면 이미 router.js 파일이 생성되어 있을 것입니다. 이를 main.js 파일에서 아래처럼 등록해 사용하고 있죠.

import router from './plugins/router'

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

그리고 router.js 파일을 보면 다음과 같은 형태로 모듈이 생성되어 있는 것을 보실 수 있습니다.

1. component를 import 합니다.
2. return 되는 Router 객체 안에 있는 routes 배열에 path와 component 정보를 담아 추가해 줍니다.

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(Router);

export default new Router({
  base: process.env.BASE_URL,
  routes: [
    { path: '/', name: 'home', component: Home },
    //...
  ]
})

이러한 방식을 사용하게 되면 파일이 router 파일을 따로 떼어내서 관리 할 수 있기 때문에 저는 이러한 방식을 추천합니다. 그리고 component를 지정할때 위에서 import를 먼저 하지 않아도 괜찮습니다.

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

이와 같은 방식으로 직접 추가도 가능합니다.

Vue Router 적극 활용

대부분의 간단한 router 사용방법은 여기까지로 충분하지만 더 멋지고 고급스러운 웹 애플리케이션을 만들기 위해서는 조금 더 알아야 할 것들이 있습니다. 그러한 내용들은 vue router 홈페이지에 들어가시면 한글도 제공되는 가이드와 레퍼런스가 있으니 활용하실 것을 적극 권장 합니다.

추가로 Angular 에서는 어떻게 쓸수 있을까

router는 사실 다른 프레임워크에서 먼저 유명해 졌습니다. angular에서도 많이 활용을 하는데 angular에서 활용하기 위한 방법도 간단히 정리해 주가 합니다. 정말 최소한의 정보만 담았으니 필요하신 분들은 아래 웹페이지에 들어가시면 필요한 정보를 얻을 수 있을 것입니다.

https://angular.io/guide/router

path 매핑

src/app 디렉토리에 app-routing.module.ts 파일 생성하여 만들어둔 컴포넌트를 등록하여 path 매핑합니다.

import {NgModule}            from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {LoginComponent}      from './pages/login/login.component';
import {MainComponent}        from './pages/main/main.component';

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: 'login', component: LoginComponent},
  {path: 'main', component: MainComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

component 등록

src/app 디렉토리에 있는 app.module.ts 에 라우팅 정보와 컴포넌트 등록합니다.

import { AppComponent } from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { MainComponent } from './pages/main/main.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
      AppComponent,
      LoginComponent,
      MainComponent
  ],
  imports: [
      BrowserModule,
      AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

표현 원하는 위치 지정

표현되기 원하는 위치(templet) 에 <router-outlet></router-outlet>을 등록한다.

<div style="text-align:center">
  <h1>
      Welcome to {{page_title}}!!
  </h1>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li><a routerLink="/login" routerLinkActive="active">login</a></li>
  <li><a routerLink="/main" routerLinkActive="active">main</a></li>
</ul>
<router-outlet></router-outlet>