Vue Router & http 통신

doit! vue.js 입문 책을 보며 학습한 내용을 간략히 정리하였습니다.

Routing?

웹페이지간 이동 방법으로 현재 SPA에서 가장 많이 사용되고 있습니다. SPA는 페이지간 이동시 미리 모든 페이지를 받아놓은 후 페이지가 이동시 클라이언트 라우팅을 사용하여 화면을 갱신하는 기술을 사용한 웹 애플리케이션를 뜻합니다. 보통 과거엔 페이지의 간단한 기능 하나만 요청하더라도 화면 전체의 데이터를 서버에서 다시 받아오는 방식으로 화면의 깜빡거리는 현상이나 부드럽지 못한 현상을 경험할 수 밖에 없었지만 라우팅 사용시 화면 전환이 매끄러울뿐만 아니라 성능적 측면에도 효율적이기에 더욱 쾌적한 웹애플리케이션을 구현할 수 있습니다.

Vue Router

뷰에서 라우팅의 기능을 구현할 수 있도록 지원하는 라이브러리를 말합니다.

뷰 라우터에서 사용하는 태그(기능)은 다음과 같습니다.

<router-link to ="url 링크">

  • 페이지 이동 태그, 화면에 <a> 태그와 동일한 기능을 하며 link to 로 지정한 링크 URL로 이동

<router-link>

  • 페이지 표시 태그, 이동한 URL에 따라 변경된 컴포넌트 및 데이터를 보여주는 태그 영역

Ex

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="app">
  <h1>뷰 라우터 샘플 1</h1>
  <p>
    <!-- 페이지 이동 태그 to = "이동할 URL 경로"-->
    <router-link to="/main">Main Component</router-link>
    <router-link to="/login">Login Component</router-link>
  </p>
  <!-- 변경된 URL값을 보여주는 영역-->
  <router-view></router-view>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var Main = {
  template: '<div>main</div>'
};

var Login = {
  template: '<div>login</div>'
}

//url에 각 컴포넌트 변수 지정
var routes = [
  {path : '/main', component : Main},
  {path : '/login', component : Login}
];

//뷰 라우터
var router = new VueRouter({
  //    mode: 'history',(해시값 제거)
  routes 
});

//뷰 인스턴스에 라우터 추가
var app = new Vue({
  router
}).$mount('#app');

Nested Router

라우터로 페이지 이동시 2개 이상의 컴포넌트를 화면에 나타내는 것을 말합니다. 상/하위 컴포넌트 구조로 구성됩니다.

Named View

페이지 이동시 여러개의 컴포넌트를 화면에 동시 표시하는 라우팅을 말합니다. 주로 header, body, footer등으로 나눌 수 있으며 네스티드 라우터와 다르게 같은 레벨의 컴포넌트를 한번에 표시하는 특징을 가지고 있습니다.

스크린샷 2019-06-25 오전 1 50 29

Nested Router Ex

1
2
3
4
<div id="app">
  <h1>네스티드 라우터</h1>
  <router-view></router-view>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var User = {
  template : `
  <div>
  User component
  <router-view></router-view>
  </div>
  `
};
//컴포넌트 등록
var UserProfile = {
	template : '<p>User Profile Component</p>'
};

var UserPost = {
	template : '<p>User Post Component</p>'
};

//네스티드 라우팅 정의영역
var routes = [
  {
    //상위 컴포넌트
    path : '/user',
    component : User,
      //하위 컴포넌트
      children : [
        {
          path : 'posts',
          component : UserPost
        },
        {
          path : 'profile',
          component : UserProfile
        }
      ]
  }
];

//뷰 라우터 정의
var router = new VueRouter({
	routes
});

//뷰 인스턴스에 라우터 추가
new Vue({
	router
}).$mount('#app');

Result (/user)

스크린샷 2019-06-25 오전 1 58 55

Result (/user/posts)

스크린샷 2019-06-25 오전 1 59 04

Result (/user/profile)

스크린샷 2019-06-25 오전 1 59 15

결과 화면을 통해 상위 컴포넌트로 등록한 User 컴포넌트를 기반으로 하위에 UserPost, UserProfile이 적용되는 것과 기본 path와 하위 path를 지정하여 URL을 통해 접근할 수 있는 부분을 확인할 수 있습니다. (하위 path는 /를 사용하지 않습니다.)

Named View Ex

1
2
3
4
5
6
7
<!-- 라우팅 영역 정의-->
<div id="app">
	<h1>특정페이지로 이동시 여러개의 컴포넌트를 동시 표시 라우팅(Named View)</h1>
  <router-view name='header'></router-view>
  <router-view></router-view>
  <router-view name='footer'></router-view>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 //컴포넌트 영역 정의
var body = {
  template : '<div>This is Body</div>'
}

var header = {
  template : '<div>This is Header</div>'
}

var footer = {
  template : '<div>This is Footer</div>'
}

var routes = [{
  //기본 path 정의
  path : "/",
  //각 컴포넌트들 등록(default는 name 태그가 없는 영역에 자동 지정)
  // 영역 : name 태그
  components : {
    default : body,
    header : header,
    footer : footer
  }
}]; 

var router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

Result Named View

스크린샷 2019-06-25 오전 2 09 30


과정 정리

  1. 사용하고자 하는 router 태그 정의 및 name 속성 추가
  2. script의 영역으로 넘어가 해당 컴포넌트 객체 정의(template 속성 정의)
  3. 네스티드, 네임드뷰 라우팅 정의(기본 URL 속성 정의)
  4. 뷰 라우터 정의
  5. 인스턴스 생성 후 뷰 라우터 추가


Reference