뷰 라우터는 뷰에서 SPA를 구현할 때 쓰는 라이브러리.
뷰 라우터 옵션
라우터 등록 후 라우터에 옵션을 정의해야한다.
대부분 SPA 앱에서는 아래와 같이 2개 옵션을 필수로 지정한다.
- routes: 라우팅 할 URL과 컴포넌트 값 지정
- mode: URL의 해쉬 값(#) 제거 속성
router-view
브라우저 URL이 변경되면, 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 뿌려진다.
이 때 뿌려지는 지점이 router-view다.
router-link
특정 링크를 통해서 페이지를 이동할 수 있게 해준다.
<a>태그로 변환된다.
예제
<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({
// URL의 해쉬값(#) 제거 속성
mode: 'history',
// 페이지의 라우팅 정보 => 어떤 URL로 이동했을 때 어떤 페이지로 이동할지에대한 정보
routes: [
// 로그인 페이지 정보
{
// 페이지 url 이름
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},
// 메인 페이지 정보
{
// 페이지 url 이름
path: '/main',
// 해당 url에서 표시될 컴포넌트
component: MainComponent
}
]
});
// 인스턴스에 라우터 인스턴스 등록
new Vue({
el: '#app',
router: router
});
</script>
</body>
