728x90
반응형
뷰 라우터
뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션(SPA), 페이지 간의 이동을 구현할 때 사용하는 라이브러리
뷰 라우터 설치 및 등록하기
1. CDN 추가
// router.html
<!-- Vue Router.js -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>2. 뷰 인스턴스에 라우터 인스턴스 등록
// router.html
...
<body>
<div id="app"></div>
<!-- script 순서 중요 -->
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue Router.js -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
<!-- 라우터 인스턴스 생성 -->
var router = new VueRouter({
<!-- 라우터 옵션 -->
});
new Vue({
el: '#app',
<!-- 뷰 인스턴스에 라우터 인스턴스 등록 -->
router: router
});
</script>
</body>
</html>결과 확인
뷰 라우터 옵션
mode: 라우터 모드 설정hash: 라우팅에 URL 해시를 사용. HTML5 기록 API를 지원하지 않는 브라우저를 포함하여 모든 Vue 지원 브라우저에서 작동history: URL 해시 미사용. HTML5 히스토리 API 및 서버 설정이 필요 (HTML5 History 모드)abstract: 모든 자바 스크립트 환경에서 작동 (예: Node.js가 있는 서버 측 브라우저 API가없는 경우 라우터가 자동으로이 모드로 강제 전환)
routes: 라우팅 할 URL과 컴포넌트 지정
<router-view>
브라우저의 주소창에서 URL이 변경되면 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려지게 되는데 이때 뿌려지는 지점이 템플릿의 <router-view>이다.
<div id="app">
<router-view></router-view> <!-- LoginComponent 또는 MainComponent 출력 -->
</div><router-link>
일반적으로 웹 페이지 이동 시 사용자가 URL을 입력하여 이동하지 않고 화면에서 특정 링크를 클릭하여 이동하게 되는데 해당 동작을 하는 태그가 <router-link>이다.
<div id="app">
<!-- router-link 는 라우터에서 페이지 이동을 하기 위한 태그 -->
<!-- router-link 는 a 태그로 변경된다. -->
<router-link to="/login">Login</router-link>
<router-link to="/main">Main</router-link>
</div><router-view>, <router-link> 예제
// router.html
...
<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>동작 확인
참고
(중급) Vue.js 라우터 네비게이션 가드 알아보기
뷰 라우터를 사용할 때 알아두면 좋은 네비게이션 가드 설명. 특정 페이지로 넘어가기 전에 검증 로직 추가하기
joshua1988.github.io
728x90
반응형
'Dev > Vue.js' 카테고리의 다른 글
| [Vue.js] 템플릿 문법 - 기본 (0) | 2020.09.08 |
|---|---|
| [Vue.js] HTTP 통신 라이브러리 - axios (0) | 2020.09.08 |
| [Vue.js] 컴포넌트 통신 방법 - 응용 (0) | 2020.09.08 |
| [Vue.js] 컴포넌트 통신 방식 - 기본 (0) | 2020.09.07 |
| [Vue.js] 컴포넌트 (0) | 2020.09.07 |
댓글