[Vue.js] 라우터 & HTTP 통신
Do it! Vue.js 입문
04-1 Vue Router
Routing이란?
- 웹 페이지 간의 이동 방법
- 현대 웹 앱 형태 중 하나인 SPA1에서 주로 사용
- UX 향상
- 서버 요청을 통해 페이지를 갱신하면 화면 상에 깜빡거리는 현상 발생
- 리액트, 앵귤로도 라우팅을 이용해 화면 전환
Vue Router
- 뷰에서 라우팅 기능을 구현하도록 지원하는 공식 라이브러리
- 뷰 라우터 구현시 필요한 특수 태그
- < router-link to=”URL” > 페이지 이동 태그
- 화면에서는 a태그로 변환되어 표시됨
- “URL”에 해당하는 텍스트 값이 브라우저 URL 끝에 추가됨
- < router -view > 페이지 표시 태그
- 갱신된 URL에 해당하는 화면을 보여주는 영역
- < router-link to=”URL” > 페이지 이동 태그
Vue Router 예제
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Sample6</title>
</head>
<body>
<div id="app">
<h1>뷰 라우터 예제</h1>
<p>
<!-- <a>버튼 태그로 변환되어 표시된다.-->
<!-- 버튼을 클릭하면 " "에 정의된 값이 브라우저 URL에 추가된다.-->
<router-link to="/main"> main 컴포넌트로 이동</router-link>
<router-link to="/login"> login 컴포넌트로 이동</router-link>
</p>
<!--갱신된 URL에 해당하는 화면을 보여주는 영역으로 <script>에서 정의한다.-->
<router-view></router-view>
</div>
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script src = "https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script>
<!--컴포넌트에 해당하는 화면을 정의한다.-->
var Main = {template: '<div> main </div> '};
var Login = {template: '<div> login</div>'};
var routes = [
{path: '/main', component: Main},
{path: '/login', component: Login}
];
<!--뷰 라우터를 생성하고, routes를 삽입해 URL에 따라 화면이 전환되게 정의한다.-->
var router = new VueRouter({
routes
});
<!--새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가한다.-->
<!--.$mount()는 el 속성과 같이 인스턴스를 화면에 붙여주는 역할-->
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
Nested Router
- 상위 컴포넌트가 하위 컴포넌트를 포함하는 구조
Named View
- 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
- 상위-하위 개념이 없고 같은 레벨인 컴포넌트가 여러 개 있다.
-
SPA(Single Page Application) 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션 ↩
Leave a comment