[Vue.js] router 사용해보기

vue router 는 url 경로마다 띄워줄 component 들을 설정하는 것입니다. vue-router 를 이용하면 SPA(Single Page Application) 을 구현할 때 마치 여러 페이지를 구현한 것 같은 효과를 낼 수 있습니다. 참고로 vue router 의 기본 경로는 '기본_도메인/#/' 입니다. 기본 경로에 #을 없애고 싶으시다면 router 의 mode 를 history 로 설정하시면 됩니다. 이제 기본적인 사용법에 대해 알아볼까요?

Vue router 사용법

1. 모듈설치

우선 모듈부터 설치해야겠죠? 아래의 명령어를 이용해 vue-router 모듈을 설치해주세요.

$npm i vue-router --save
// --save 는 package.json 에 자동으로 추가되도록 하기 위한 옵션입니다.

* 참고로 제 예제의 폴더구조는 위와 같습니다. 참고하셔서 여러분들의 프로젝트 환경과 맞게 수정하시면 될 거 같아요!

2. 라우터 설정

이 후, main.js (또는 router 를 설정할 vue 객체가 있는 곳) 에서 Vue 객체에 라우터를 설정해줍니다.  이렇게 Vue 객체를 만들고 router 를 설정하셨다면 아래의 3번과 4번 방법 중 하나를 선택해 구현하시면 됩니다.

import Vue from 'vue'

import App from './App.vue'

import router from './router'

new Vue({

el: '#app',

router,

render: h => h(App)

})

3. 기본적인 router 사용법

 정말 기본적인 router 기능만 사용하고 싶으시다면 아래와 같이 templete 을 작성해주시면 됩니다. 아래의 코드와 같이 구현하면 '도메인/foo' 로 접속하면 Foo 라는 글씨가, '도메인/bar' 로 접속하면 Bar 라는 글씨가 화면에 보입니다. 

<template>

<div id="app">

<router-link to="/foo">Foo</router-link>

<router-link to="/bar">Bar</router-link>

</div>

</template>

4. 컴포넌트를 렌더링하는 router 사용법

 Vue 객체를 만들고 router 를 설정하셨다면 App.vue 파일을 만들고 아래와 같이 코드를 작성합니다.

<template>

<div id="app">

<router-view></router-view>

</div>

</template>

<script>

export default {

name: 'app'

}

</script>

templete 태그 내에는 대표 div 는 오직 한 개만 존재할 수 있다는거 아시죠?

id 가 app 인 상위 div 안에 router-view 를 추가했습니다. 앞으로 router 에 경로와 컴포넌트를  추가하면 router-view 태그 자리에 그 컴포넌트가 로드되는 것입니다. 또한 id="app" 의 app 과 main.js 에서 생성한 뷰 객체의 el 값인 app이 같아야합니다. 이렇게 설정을 해주셨으면 이제 router 객체를 만들어 보겠습니다.

 이제 router폴더 밑에 index.js 파일을 만들어주세요. 아래의 코드는 기본적인 Router 객체를 만드는 코드입니다.

import Vue from 'vue'

import Router from 'vue-router'

import Login from '../Login'

Vue.use(Router)

export default new Router({

mode: "history",

routes: [

{

path: '/login',

component: Login

}

]

})

 Router 생성자의 인자로 넘긴 객체에 mode, routes 라는 키값을 추가했습니다. history 는 위에서도 말씀드렸듯이 경로에 기본적으로 추가되는 #을 없애기 위해 설정했고, routes 는 배열을 값으로 가지며 그 배열에 경로에 따른 컴포넌트들을 추가하시면 됩니다. 예로 Login 을 추가해보았습니다. '도메인/login' 으로 접속하시면 router-view 태그 자리에 Login 컴포넌트가 보이게 됩니다. 이런식으로 path 와 component 가 있는 객체를 routes 에 추가하시면 됩니다!

 이런식으로 컴포넌트들을 추가하셨다면, 다른 경로로 접속해야 할 때 아래와 같이 router.push() 를 이용해 경로를 바꿔주시면 됩니다. 

<template>

<div id="app">

<router-view></router-view>

</div>

</template>

<script>

export default {

import router from "./router";

name: 'app',

mounted () {

router.push("/login");

}

}

</script>

5. Router를 통해 값 전달

 라우터를 구현해 페이지를 관리할 때 'router 에 추가된 컴포넌트끼리 값 전달을 어떻게 하는거지?' 라는 궁금증이 생길겁니다. 이번에는 컴포넌트 간 값을 주고받는 방법에 대해 알아보겠습니다. 값을 전달하는 방법에는 2가지가 있습니다. path 에 key-value 를 추가해 url 을 통해 주고받는 방법이 있고, params 를 이용해 값을 주고받는 방법이 있습니다. 

(1) path를 통한 값 전달

 router.push("/login?id=hyeona@naver.com");

 위와 같이 router.push() 의 인자로 path 를 넘길 때 key-value 를 작성해주시면 됩니다. ? 뒤에 키=값 으로 입력하며 여러개를 전달하고 싶으실 때는 키=값&키=값&... 으로 계속 추가해주시면 됩니다. 그럼 Login 컴포넌트에서 값을 전달받을 때는 어떻게 해야할까요?

 path 를 통해 값을 받는 방법은 vue 객체의 query 를 이용하는 것입니다.

this.$route.query.key

 위와 같은 방법으로 값을 전달받을 수 있으며 전달하는 곳에서 설정한 키 값을 key 에 넣으시면 됩니다. 그럼 id 값을 받으려면 this.$route.query.id 로 하시면 되겠죠? 그치만 이렇게 하면 주소 창에 전달받은 값이 다 노출되므로 보안과 관련된 값은 이렇게 넘기지 않기를 바랍니다.

(2) params 를 이용한 값 전달

 경로에 노출되지 않도록 router 를 이용해 값을 전달하고 싶을 때는 params 를 이용하시면 됩니다. 다만, 페이지를 새로고침하거나 리로드할 때 값이 유지되지 않으니까 주의하세요!

 params 로 값을 넘길때는 path로 router 에 컴포넌트를 추가하시면 안됩니다. path 와 params 는 같이 작동이 안된다고 하니까 params 를 이용하실 때는 name 을 이용해주세요! (저도 이것때문에 삽질 많이 했어요T^T..) routes 에 추가한 Login 을 수정해볼까요?

routes: [

{

name: 'login',

path: '/login',

component: Login,

props: true

}

]

 params 를 받기위해서는 name 과 함께 props: true 도 추가해주셔야 합니다. 이렇게 추가하셨다면 이제 사용법을 알아보겠습니다.

 router.push({name: "login", params: {"id": "hyeona@naver.com"}});

 path 대신 name을 이용해 어떤 경로로 갈지를 알려주고, params 를 이용해 전달한 값을 객체로 알려줍니다. 그럼 Login 에서는 params 를 전달받아야겠죠?

this.$route.params.key

 params 로 보내진 값을 받기 위해서는 this.$route.params 를 이용해 받으시면 됩니다. 예제처럼 id 를 받으려면 this.$route.params.id 를 이용해 전달 받으시면 됩니다. 이렇게 하시면 url 에 값들이 보이지 않으니 path 방법보단 안전하겠죠?

이상으로 router 를 이용하는 방법에 대해 알아보았습니다 :)