VueJS에서 라우터(router)를 설정하고 사용하는 방법에 대하여 알아봅니다.

! 라우터(Router) 설정이란?

다른 프레임워크처럼 vuejs 역시 라우터를 제공합니다. 이때 VueJS에서는 Vue Router를 사용하게되는데요 라우터를 설정하게되면 특정 주소와 접근할 페이지 정보를 설정할 수 있습니다. 즉, /sample/ 이라는 주소로 접근할 경우 원하는 페이지의 정보를 보여줄 수 있도록 설정하는 것이 바로 라우터(router)에서 라우트(route)를 설정한다고 생각하시면 됩니다.

SPA(싱글 페이지 어플리케이션)에서는 하나의 페이지로 동작하기 때문에 실제로 다른 주소로 접근하여 웹페이지를 리로드하지 않는 대신에 Router 설정이 반드시 필요하게 됩니다.

# Vue Router 설치 및 설정하기

가장 먼저 Router를 설치하는 방법입니다. vuejs 프로젝트에서 Vue Router를 사용하려면 script를 추가하거나 npm을 사용하여 install하는 방법 두 가지가 있습니다. 먼저 로컬에서 script를 사용하여 불러오는 방법입니다.

CDN 방식으로 사용할 경우 Unpkg.com에서 제공하는 소스를 연결할 수 있습니다.

! npm으로 Vue Router 설치하기

만약 node package를 사용하는 경우 아래와 같이 프로젝트 폴더에서 npm install을 사용하여 실행합니다.

npm install vue-router

그리고 Vue 어플리케이션에서 아래와 같이 VueRouter를 추가하여 사용하도록 합니다.

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

Vue.use(VueRouter)

여기까지 설치 및 설정이 완료되었습니다. 다음은 실제로 Vue Router를 사용하여 라우팅(Route)하는 방법을 알아봅니다.

# Vue Router 사용하는 방법 및 예제보기

이제 본격적으로 라우팅 설정을 추가합니다. 먼저 라우팅된 화면이 보여질 수 있도록 Vue앱에 다음과 같이 태그를 <router-view> 태그를 원하는 곳에 추가합니다.

<div id="app">
<p>Vue Router 테스트</p>


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

적용된 router-view 태그(컴포넌트)는 라우팅 정보가 바뀌면 해당하는 뷰를 그려 다른 화면으로 전환하게 됩니다. 이제 각각의 페이지 설정을 할텐데요 ~ 아래와 같이 new VueRouter()를 사용하여 각각의 라우팅 정보를 입력할 수 있습니다. 간단한 모습은 다음과 같습니다.

const router = new VueRouter({
routes: [
// 라우팅 설정하기
]
});

그럼 더 자세한 설정은 아래에서 알아봅니다.

! Vue Router에서 History모드로 사용하기

참고로 url 주소에 hash(#)를 사용하는 방법과 HTML5에서 hash를 제거하는 history mode가 존재합니다. 만약 # 기호를 제거하려면 아래와 같이 mode: 'history' 값을 설정해줍니다.

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

이제 주소창에서는 #가 제거되어 사용되게됩니다.

Ex) https://webisfree.com/#/siteDetails/ -> https://webisfree.com/siteDetails/

! routes [] 라우트 값 설정하기

이제 가장 중요한 routes: [] 값(라우팅 주소 및 이름 등등)을 설정해보겠습니다. url주소 및 라우트 이름, 메타 정보 등등 페이지의 대부분의 설정이 이 안에서 이루어집니다. 만약 Home 페이지와 SiteList 페이지를 만든다면 어떻게 해야하는지 알아봅니다.

@ Home 페이지
- url : /
- 사용할 컴포넌트 : HomeComponent

@ SiteList 페이지
- url : /siteList/
- 사용할 컴포넌트 : SiteListComponent

이제 위 페이지를 아래와 같이 라우팅(routes: [])에 추가하여 설정해보겠습니다.

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
name: 'Home',
component: 'HomeComponent'
},
{
      path: '/siteList',
name: 'SiteList',
      component: 'SiteListComponent'
    }
]
});

이제 두 개의 라우트 주소가 만들어졌습니다.

! Router 주소로 이동하는 방법

라우터 정보가 설정되었다면 각각 해당된 페이지, 라우트로 이동할 수 있습니다. 이때 이동하는 방법은 moveTo() 등의 메소드를 만들어 $router.push() 방법으로 이동하거나 아니면 <router-link> 컴포넌트를 사용합니다. 먼저 router-link 컴포넌트를 사용하는 방법입니다.

@ router-link 사용하기
router-link 컴포넌트는 해당 엘리먼트를 클릭시 자동으로 해당 라우트 위치로 이동하도록 링크를 생성합니다. 만약 Home과 SiteList로 이동하는 링크를 각각 만든다면 아래와 같이 만들 수 있습니다.

<router-link :to="/">Home<router-link>
<router-link :to="/siteList">SiteList<router-link>

이제 클릭하면 각각 해당하는 링크로 이동하게 됩니다. 다음은 메소드를 등록 후 사용하는 방법입니다.

@ methods를 사용하는 방법, $router.push()
다음은 methods에 등록해두고 클릭시 해당 메소드를 호출하여 $router를 이동하는 방법입니다. 라우트 이동시에는 $router.push()를 사용합니다.

아래와 같이 변수에 등록 후 사용하면 편리합니다.

var router = this.$router;

router.push('/siteList') // 이동 위치를 입력
router.push({ name: 'SiteList' }) // 해당하는 라우터 이름으로 이동
router.push({ path: '/siteList' }) // 해당하는 pathname을 입력하여 이동

보시는 것처럼 path, name 둘 다 많이 사용됩니다. 기본값은 path로 해당하는 경로로 이동하는 방법입니다.

! 이동하면서 파라미터를 함께 전달하기

추가로 라우팅을 이동하면서 동시에 파라미터, 쿼리스트링 정보를 함께 전달할 수 있습니다. 아래에서 방법을 알아봅니다.

// 파라미터 정보 전달
router.push({
name: 'SiteList',
params: { site: 'webisfree.com' }
})

// 쿼리스트링을 함께 전달하기
router.push({
path: '/siteList',
query: { site: 'webisfree' }
})

$router를 이동하는방법은 몇 가지 메소드가 존재하는데 다음과 같습니다.

$router.push() // 현재 라우트를 변경
$router.replace() // history 객체에 남기지 않고 라우트를 변경
$router.go() // 앞 또는 뒤 위치로 이동할 수 있음

$router.go()의 경우 window.history.go()와 동일하게 동작합니다. 양수 및 음수를 사용할 수 있습니다. 아래와 같이 사용합니다.

$router.go(3) // 3 단계 앞으로 이동
$router.go(1) // 1 단계 앞으로 이동
$router.go(-1) // 이전 페이지, 1 단계 전으로 이동

! 라우트 페이지에 메타 정보 설정하기

router에서 각각의 페이지와 관련 메타 정보 역시 설정이 가능합니다. 이때 meta 프로퍼티를 사용합니다. meta 안에는 여러가지 정보를 입력할 수 있는데 title을 외의 meta 태그 요소는 metaTags라는 키워드를 사용합니다.

routes: [
{
path: '/',
meta: {
title: 'WebDevelopment Blog'
metaTags: [
{
name: 'description',
content: 'Hello Webisfree!'
}
]
}
}
]

위와 같이 설정한 후에 '/'으로 이동하면 자동으로 메타 정보가 페이지에 생성되게 됩니다.

<head>
<title>WebDevelopment Blog</title>
<meta name="description" content="Hello Webisfree!" />
</head>

추가로 만약 페이지의 인증이 반드시 필요한 경우 아래와 같이 requireAuth를 사용할 수 있습니다.
requireAuth // 인증이 반드시 필요한 경우 사용

# 라우팅과 이벤트 설정하기

VueJS에서 Router를 사용한 라우팅 정보가 변경, 업데이트되는 경우 특정 이벤트를 호출하여 함수를 동작할 수도 있습니다. 만약 특정 라우트로 이동하기 직전에 함수를 호출하려면 아래와 같이 beforeEnter가 사용됩니다.

const router = new VueRouter({
routes: [
    {
      path: '/',
component: Home,
      beforeEnter : function(to, from, next) {
// Code
},
}
]
});

이처럼 라우터 인스턴스에 설정할 수도 있지만 각각의 컴포넌트의 라이프사이클 단계에서도 사용할 수 있습니다. 이 경우 아래와 같이 세 가지로 구분됩니다.

beforeRouteUpdate // 라우터 업데이트 될 때
beforeRouteLeave // 현재 라우터를 떠날 때
beforeRouteEnter // 현재 라우터로 들어오기 직전

간단하게 예제를 만들어보면 다음과 같습니다. 아래 예제는 해당 컴포넌트에서 라우트 정보가 업데이트, 변경될 때 alert()을 사용하여 메시지를 띄우는 간단한 예제입니다.

const SiteList = {
template: '<div>Test</div>',
beforeRouteUpdate (to, from, next) {
alert('Route will be updated.')
next()
}
}

! 전역 범위의 라우터 이벤트 등록 및 사용하기

각각의 라우터 단위 또는 컴포넌트 단위가 아니라 router를 생성할 때 전역 범위로 등록하여 사용하는 방법입니다.

router.beforeEach((to, from, next) => {
// Code here...
next();
})

여기서 next()는 해당하는 라우트 위치로 이동시켜줍니다. 만약 이동을 원치 않고 중지하려면 next(false)를 사용할 수 있습니다. 또한 next('/siteList/')처럼 원하는 곳으로 redirect 할 수도 있습니다.

next() // 라우트 이동
next(false) // 라우트 이동 중지
next('routePath') // 해당 라우트 경로로 이동

여기까지 VueJS Router에서 사용되는 다양한 방법들을 자세히 알아보았습니다.