3장 라우터와 HTTP 통신

3장. 뷰 라우터

라우터는 웹 페이지 간의 이동방법을 뜻하며, SPA에서 화면을 부드럽게 전환할 때 많이 사용한다.

1. 뷰 라우터

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러이며, 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다.

<router-link to="URL값">

페이지 이동 태그
화면에서는 <a>로 표시되며, 클릭하면 to에 지정한 URL로 이동한다.

<router-view> </router-view>

페이지 표시 태그.
변경되는 URL에 따라 해당 컴포넌트를 표시하는 영역.

1) 뷰 라우터 기본 예시

<router-link to="/main">Main 컴포넌트로 이동</router-link>
<router-link to="/login">Login 컴포넌트로 이동</router-link>

<router-view><!-- 갱신되는 화면 영역 --></router-view>

<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<!-- 라우터 CDN 추가 -->

<script>
var Main = {template:'<div>main</div>'};
var Login = {template:'<div>login</div>'};

var routes = [
  {path:'/main', component:Main},
  {path:'/login',component:Login}
  ]
// 라우트들 정의

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

var app = new Vue({
  // mode:'history', URL 형식의 #값을 없애고 싶은 경우 추가한다.
  rotuer
}).$mount('#app')
// 뷰 인스턴스에 라우터 추가

</script>

$mount() API
- el속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다.
- 인스턴스 생성 시 el 속성을 넣지 않았더라도 강제로 인스턴스를 화면에 붙일 수 있다.
- 공식 문서에서는 뷰 라우터를, 생성된 인스턴스에다 $mount()를 이용해 붙이는 식으로 안내하고 있다.

2) 네스티드 라우터 예시

<div id="app">
  <router-view><!-- User 컴포넌트가 표시될 영역 --></router-view>
</div>

<script>
  var User = {
    template:`
    <div>
    User Component
    <router-view></router-view>
    </div>'
    `
  }
  var UserPost = {template : '<p>User Post Component</p>'}
  var UserProfile = {template : '<p>User Profile Component</p>'}

  var routes = [
    {
      path: '/user',
      component:User,
      children:[
        {
          path:'posts',
          component:UserPost
        },
        {
          path:'profile',
          component:UserProfile
        }
      ]
    }
  ]
  
  var router = new VueRouter({
    routes
  })

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

</script>

3) 네임드 뷰 예시

특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

<div id="app">
  <router-view name="header"></router-view>
  <router-view></router-view>
  <router-view name="footer"></router-view>
</div>

<script>
  var Header = {template:'<div>Header</div>'}
  var Body = {template:'<div>Body</div>'}
  var Footer = {template:'<div>Footer</div>'}

  var router = new VueRouter({
    routes:[
      {
        path: '/',
        components:{
          default:Body,
          header:Header,
          footer:Footer
        }
        // <router-view>의 name 속성과 컴포넌트 연결
      }
    ]
  })
</script>

2. 뷰 HTTP 통신

1) 뷰 리소스

뷰 리소스는 HTTP 통신 관련 뷰 라이브러리이다. 이는 라우팅과 상태 관리와 같은 라이브러리와 달리 프레임워크에 필수적인 기능이 아니라고 판단하에 공식적인 지원이 중단되었다.

사용 예시

<div id="app">
  <button v-on:click="getData"> HTTP GET 요청 보내기</button>
</div>

<script src="cdn vue-resource"></script>
<script>

new Vue({
  el: '#app',
  methods: {
    getData() {
      this.$http.get('URL')
      .then((response) => console.log(Json.parse(response.data)));
    },
  },
});

</script>

this.$http.get(): 뷰 리소스에서 제공하는 API이다. HTTP GET 요청을 서버에 보내고 데이터를 받아온다.

2) 엑시오스

가장 많이 사용되는 HTTP통신 라이브러리이다.
Promise 기반의 API 형식으로 간편하게 로직 구현이 가능하다.

사용 예시

<div id="app">
  <button v-on:click="getData"> HTTP GET 요청 보내기</button>
</div>

<script src="cdn axios.js"></script>

<script>

  new Vue({
    el:'#app',
    methods:{
      getData(){
        axios.get('URL')
        .then((response)=>console.log(response))
      }
    }
  })

</script>