뷰 라우터
뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다.
페이지 이동하는 기능을 뷰 라우터로 구현할 수 있다!!
실습 코드
<!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>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/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponent = {
template: '<div>main</div>'
}
var router = new VueRouter({
// 페이지의 라우팅 정보
routes: [
{
//페이지의 url
path:'/login',
//해당 url에서 표시될 컴포넌트
component: LoginComponent
},
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el: '#app',
router: router
});
</script>
</body>
</html>router-view, router-link
router-view)
태그는 페이지의 url이 이동했을 때 그 범위내에서 뿌려주는 태그
router-link)
태그는 라우터에서 페이지 이동을 위한 태그
디자이너, 기획자 출신의 개발자