[Vue.Js] 9. Vue.Js 화면 구성 요소 변경 (Router)
뷰는 일단 SPA를 지원하는 프레임워크입니다.
SPA(Single Page Application)는 단일 페이지로 콘텐츠를 동적으로 업데이트하는 웹 응용 프로그램입니다.
새 링크로 이동할 때마다 새 페이지를 로드하는 웹 애플리케이션과 반대 되죠.
SPA를 구현하기 위해 화면 구성 요소 중 일부를 변경할 예정입니다.
라우터(Router)라는 것을 사용해서 라우팅(Routing)을 할 것인데요.
라우팅: 웹 페이지간 이동하는 방법 (화면에 깜빡거림 없이 전환 가능)
뷰에서는 라우터를 지원하고 있어 어렵지 않게 가능할 것입니다.
뷰 라우터를 사용하려면 아래의 구분을 script에 추가해야 사용 가능합니다.
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
아래가 이번에 사용할 문법입니다.
페이지를 이동할 때 사용되는 태그입니다.
클릭 시 지정해둔 “URL link”로 이동됩니다.
html코드로 확인해 보면 <a>로 나타날 것입니다.
<router-link to=”URL link”>
이전에 명령어로 이동한 다음에 해당되는 컴포넌트를 디스플레이할 영역입니다.
<router-view>
아래는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Router Example</title>
</head>
<body>
<div id="app">
<div id="router-link">
<router-link to="test1">test1</router-link>
<router-link to="test2">test2</router-link>
</div>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
<script>
var test1_component = {
template: '<div>test1</div>'
};
var test2_component = {
template: '<div>test2</div>'
};
var router = new VueRouter({
routes : [
{ path: '/test1', component: test1_component },
{ path: '/test2', component: test2_component }
]
});
new Vue({
el: '#app',
router
});
</script>
</body>
</html>
필요한 부분만 떼서 보겠습니다.
<div id="app">
<div id="router-link">
<router-link to="test1">test1</router-link>
<router-link to="test2">test2</router-link>
</div>
<router-view></router-view>
</div>
<script>
var test1_component = {
template: '<div>test1</div>'
};
var test2_component = {
template: '<div>test2</div>'
};
var router = new VueRouter({
routes : [
{ path: '/test1', component: test1_component },
{ path: '/test2', component: test2_component }
]
});
new Vue({
el: '#app',
router
});
</script><router-link to="test1">test1</router-link>
앞서 언급했 듯이 클릭 시 test1으로 이동하고
<router-link to="test2">test2</router-link>
앞서 언급했 듯이 클릭 시 test2로 이동합니다.
아래의 router-view의 경우에는 script를 보시면 알 수 있습니다.
먼저 test-component를 두 개 만들었으며
router의 routes속성에 path(url 경로)와 같이 지정해 줬습니다.
그리고 Vue인스턴스에 router를 추가해줬습니다.
아래가 실행 결과입니다.
초기 상태 링크 확인 시 뒤에 #만 있음
test1 클릭 이후
router-view영역이 test1으로 되었으며
#뒤에 test1이 추가됨을 확인 할 수 있음
test2 클릭 이후
router-view영역이 test2로 되었으며
#뒤에 test2가 추가됨을 확인 할 수 있음
사실 el: '#app', → $mount('#app');로 대체할 수 있습니다.
Vue 인스턴스의 코드를 아래로 수정해도 동작하는지 확인해보세요!
new Vue({
router
}).$mount('#app');다음에는 네스티드 라우터(중첩 라우터)와 네임드 뷰를 만들어 보겠습니다.