Router
Vue Router는 Vue 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다.
페이지 이동 시 사용하는 기능으로, 프로젝트에 Vue Router를 설치하는 방법은 CDN, NPM 2가지 방식이 있습니다.
CDN 방식
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js">NPM 방식
npm install vue-router
Vue Router를 설치하고 나면 Router Instance를 하나 생성하고 Vue Instance에 등록합니다.
Vue Router 등록
// 라우터 인스턴스 생성
var router = new VueRouter({
// 라우터 옵션
})
// 인스턴스에 라우터 인스턴스를 등록
new Vue({
router: router
})
Vue를 등록하고 나면 Vue Router의 옵션을 정의합니다.
Vue Router 옵션
- routes : 라우팅 할 URL과 Component 값 지정
- mode : URL의 해쉬 값 제거 속성
new VueRouter({
mode: 'history',
routes: [
{ path: '/login', component: LoginComponent },
{ path: '/home', component: HomeComponent }
]
})
Router을 이용하여 페이지 전환하는 방법에는 router-view, router-link 2가지 방식이 있습니다.
router-view
브라우저의 주소 창에서 URL이 변경 시 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려집니다. 이 때 뿌려지는 지점이 템플릿의 <router-view>입니다.
즉, 주소창 URL이 변경 시 Component를 이동할때 사용합니다.
<div id="app">
<router-view></router-view> <!-- LoginComponent 또는 HomeComponent -->
</div>router-link
일반적으로 웹 페이지에서 페이지 이동을 할 때는 사용자가 url을 다 쳐서 이동하지 않습니다. 이 때 화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 그게 바로 <router-link> 입니다.
<div>
<router-link to="이동할 URL"></router-link>
</div>router-view, router-link에 대한 예제는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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> <!--== <a href="/login">Login</a> -->
<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@2.0.0/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
component: LoginComponent
},
// 메인 페이지 정보
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el:'#app',
router: router
});
</script>
</body>
</html>
Axios
Axios는 Vue에서 가장 많이 사용하는 Promise 기반 HTTP 통신 라이브러리입니다. CDN과 NPM 설치 방식 모두 지원하며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다.
script 코드를 입력하고 라이브러리를 설치합니다.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>npm install axiosaxios의 기본구조는 아래와 같습니다.
methods: {
fetchData: function() {
axios.get('URL 주소');
}
}아래는 axios를 이용한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Axios</title>
</head>
<body>
<div id="app">
<button v-on:click="getData">get user</button>
<div>
{{ users }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: []
},
methods: {
getData: function() {
var vm = this;
axios.get('https://jsonplaceholder.typicode.com/users/')
.then(function(response) {
console.log(response.data);
vm.users = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>'Framework > Vue.js' 카테고리의 다른 글
| [Vue.js] Vuex와 State (0) | 2023.04.09 |
|---|---|
| [Vue.js] Vue.js 기본 - Vue Template (0) | 2022.07.25 |
| [Vue.js] Vue.js 기본 - Component 통신 (1) | 2022.07.24 |
| [Vue.js] Vue.js 기본 - Vue, MVVM 패턴, Instance, Component (0) | 2022.07.24 |