뷰 라우터(Vue Router)
뷰 라이브러리를 사용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.
뷰 라우터를 사용하여 뷰로 만든 페이지 간 자유로운 이동이 가능하다.
뷰 라우터 사용을 위해서는 CDN 방식과 NPM 방식으로 사용할 수 있는데, 아래 예제에서는 CDN 방식을 사용한다.
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
뷰 라우터 구현은 <router-view>와 <router-link> 태그를 사용한다.
<router-view></router-view>페이지 표시 태그이다. 변경되는 URL에 따라 해당 컴포넌트를 뿌려준다.
<router-link to="URL"></router-link>페이지 이동 태그이다. 화면 코드에서는 <a> 태그로 표시된다.
클릭하면 to에 지정한 URL로 이동한다. 이때 to는 <a> 태그의 href 속성과 같은 의미인 것이다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponet = {
template: '<div>main</div>'
}
var router = new VueRouter({
routes : [
{
path: '/login',
component: LoginComponent
},
{
path: '/main',
component: MainComponet
}
]
});
new Vue({
el: '#app',
router: router
});
</script>
</body>
</html>뷰 라우터 사용을 위해 VueRouter를 생성하여 router 변수에 저장하였다.
VueRouter는 페이지의 라우팅 정보로, 어떠한 URL로 이동했을 때 어떤 페이지 정보가 뿌려질 것인지 정의한다.
배열 형태로 값이 들어가고, 배열 값에는 페이지 개수만큼의 객채가 들어간다.
현재는 로그인 페이지와 메인 페이지 두 개의 페이지를 생성한다고 가정하였고, 따라서 두 개의 객체(로그인 페이지 정보, 메인 페이지 정보)가 들어갔다.
path 속성에는 페이지의 URL이 들어가고, component 속성에는 해당 URL에서 표시될 컴포넌트 값이 들어간다.
Vue 인스턴스 생성 시, 뷰 라우터를 사용하려면 router 속성을 꼭 명시해주어야 한다. 그렇지 않으면 라우터 연결이 되지 않아 오류가 발생한다.
처음 페이지에는 아무것도 출력되지 않고, URL은 다음과 같을 것이다. http://127.0.0.1:5500/playground/router.html#/
URL 뒷부분에 login을 붙이면 login이라고 출력되는 페이지가 나올 것이고, main을 붙이면 main이라고 출력되는 페이지가 나올 것이다.
Anonymous Component가 생성된 것을 확인할 수 있다.
위 코드에서 <router-link> 태그를 추가해본다.
사용자는 위와 같이 직접적으로 URL을 쳐서 들어가는 게 아니고 버튼 등을 클릭하여 페이지를 이동하기 때문에 웹 구현 시 <router-link> 태그는 필수적이라 볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponet = {
template: '<div>main</div>'
}
var router = new VueRouter({
routes : [
{
path: '/login',
component: LoginComponent
},
{
path: '/main',
component: MainComponet
}
]
});
new Vue({
el: '#app',
router: router
});
</script>
</body>
</html>html 부분의 <router-view> 태그 위에 <router-link> 태그를 추가하였다.
<router-link> 태그로 감싸 져 있는 부분을 클릭하면 to 속성에 들어가 있는 값으로 URL이 변경된다.
그리고 URL 값에 따라 화면 전체가 변경되는 것이 아닌, <router-view> 태그 부분이 변경된다.
[도서] Do it! Vue.js 입문
[인프런] Vue.js 시작하기 - Age of Vue.js
