뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때
사용하는 라이브러리입니다.
<div id="app">
<div>
<!-- router-link는 해당페이지로 이동이 가능하게 한다. a태그로 변환되어 나옴.-->
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div>
<!--main or login component를 화면에 보여줌-->
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<script>
const LoginComponent = {
template: '<div>login</div>'
}
const MainComponent = {
template: '<div>main</div>'
}
const router = new VueRouter({
// url에 #를 지워주는 히스토리모드
mode:'history',
// 페이지의 라우팅 정보(routes)
// 배열안에 컴포넌트당 1개의 객체를 추가함. [{},{}]
routes: [
// 로그인 페이지 정보
{
// 페이지의 url
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},
// 메인 페이지 정보
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el: '#app',
router: router //es6문법에 따라 속성과 값이 같아 router로 축약가능.
});
</script>
뷰 라우터 mode:'history'
사용시 유의사항
히스토리 모드
뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법
라우터의 네이베이션 가드