Vue Router란?
Vue 라이브러리를 이용해서 싱글페이지 애플리케이션(SPA)을 구현할 때 사용하는 라이브러리
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> // 뷰 라이브러리
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> // 라우터 라이브러리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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
},
{
// url은 main
path: '/main',
// 컴포넌트 이름은 MainComponent
component: MainComponent
},
]
});
new Vue({
el: '#app',
router: router
});
</script>
</body>
</html>router의 path에 해당하는 컴포넌트는 하나이다. 따라서 component로 등록한다 (components X)
routes: [
{
path: '/login',
component: LoginComponent
},
]
www.inflearn.com/course/Age-of-Vuejs/
Vue.js 시작하기 - Age of Vue.js - 인프런
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워
www.inflearn.com
joshua1988.github.io/vue-camp/
Cracking Vue.js
joshua1988.github.io
위 강좌를 통해 배운 내용을 정리했습니다.
'Study > Vue' 카테고리의 다른 글
| [Vue] 템플릿 문법 computed, v-if, v-show (0) | 2020.12.06 |
|---|---|
| [Vue] HTTP 통신 라이브러리 - Axios 엑시오스 (0) | 2020.12.06 |
| [Vue] 같은 컴포넌트 레벨 간의 통신 방법 (0) | 2020.12.06 |
| [Vue] 컴포넌트 통신 방식 Props, Event emit (0) | 2020.12.05 |
| [Vue] 컴포넌트 Component (0) | 2020.12.02 |
댓글