라우터
- 페이지를 이동할때 사용하는 Vue공식 library or 기능
라우터 공식문서
라우터 등록, 뷰 라우터 옵션
<body>
<div id="app">
<div>
<!-- <router-link to="/login">Login</router-link> ===> <a href="/login"></a>(최종적으로 앵커 tag로 변환) -->
<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>'
}
// 1. 라우터 인스턴스 생성
var router = new VueRouter({
// 라우터 옵션
// routes : 라우팅 할 URL과 컴포넌트 값 지정
// mode : URL의 해쉬 값 제거 속성
// history : #가 없어지면서 깔끔한 URL로 뿌려줌
// mode : 'history',
// 페이지의 라우팅 정보(어떤 url로 이동시 어떤 페이지가 나올지)
routes:[
{
// 페이지의 url
path: '/login',
// 해당 url에서 표시될 component(components가 아님, 페이지마다 컴포넌트는 하나)
// new Vue 같이 인스턴스나 컴포넌트에 컴포넌트를 등록할때는 대부분 여러 컴포넌트를 등록(components)
component: LoginComponent
},
{
path :'/main',
component: MainComponent
}
]
});
// 2. 인스턴스에 라우터 인스턴스를 등록
new Vue({
el: '#app',
router: router
});
</script>
</body>router-view
- URL이 변경되면 특정 URL에 따라서 컴포넌트가 뿌려짐 -> 그 컴포넌트가 뿌려지는 영역
<div id="app">
<router-view></router-view> <!-- LoginComponent, MainComponent -->
</div>router-link
- 페이지 이동을 할때 사용자가 URL을 다 입력X ->
마우스로 특정 페이지를 이동 - 최종적으로
<a href="/login"></a>으로 뿌려짐
<div id="app">
<div>
<!-- <router-link to="/login">Login</router-link> ===> <a href="/login"></a>(최종적으로 앵커 tag로 변환) -->
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
</div>추가로
배우면서 나아가자