기록하는 곳

3. 라우터 & HTTP 통신

Vue Router

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리

태그설명
<router-link to="URL 값">페이지 이동
(화면에서는 <a>로 표현 됨)
<router-view>페이지 표시 태그
(router-link 태그를 클릭하면 router-view 영역이 바뀜)
<html>
  <head>
    <!-- ...중략... -->
  </head>
  <body>
    <!-- ...중략... -->

    <!-- 라우터 링크 영역 -->
    <router-link to="/main">Main으로 이동</router-link>
    <router-link to="/login">Login으로 이동</router-link>

    <!-- 라우팅 되는 영역 -->
    <router-view></router-view>

    <script src="vue CDN"></script>
    <script src="vue 라우터 CDN"></script>
    <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({
        mode: 'history',
        routes,
      });

      var app = new Vue({
        router,
      }).$mount('#app');
    </script>
  </body>
</html>

$mount() : el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 하는 API

Nested Router (네스티드 라우터)

한글로 번역하면 중첩 라우터라는 뜻이다.
<router-view>로 보여줄 view 내부에서도 <router-view>를 사용하는 경우를 말한다.
라우팅을 정의할 때 children 속성을 사용하면 된다.

var routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'posts', // = /user/posts
        component: UserPost,
      },
      {
        path: 'profile', // = /user/profile
        component: UserProfile,
      },
    ],
  },
];

Named View (네임드 뷰)

네임드 뷰는 같은 레벨에서 여러개의 컴포넌트를 한번에 보여줄 때 사용한다.

<!-- ..중략.. -->
<div id="app">
  <router-view name="header"></router-view>
  <router-view></router-view>
  <router-view name="footer"></router-view>
</div>

<!-- ..중략.. -->

<script>
  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 router = new VueRouter({
      routes: [
          path: '/',
          components: {
              default: Body,
              header: Header,
              footer: Footer
          }
      ]
  });

  // ..중략..
</script>

Vue HTTP 통신

HTTP는 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜이다.

뷰 리소스 (vue-resource)

http 통신 관련 라이브러리이다.
axios, fetch 등 대안이 많으므로 굳이 사용하지 않아도 됨

<!-- ..중략.. -->
<body>
  <div id="app">
    <button @click="getData">프레임워크 목록 가져오기</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
        getData: function () {
          // this.$http.get() : vue resource에서 제공하는 API
          this.$http
            .get(`https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json`)
            .then(function (response) {
              console.log(response);
              console.log(JSON.parse(response.data));
            });
        },
      },
    });
  </script>
</body>

Axios

현재 Vue에서 가장 많이 사용되는 HTTP 통신 라이브러리이다.
fetch와 다르게 구형 브라우저를 지원하며, 데이터를 json(객체)형태로 자동 변환해준다.

API 유형처리 결과
axios.get('url 주소').then().catch()get요청에 대한 응답을 받는다.
axios.post('url 주소').then().catch()post 요청에 대한 응답을 받는다.
axios({ 옵션 속성 })http 요청에 대한 정의를 직접 할 수 있다.
Last Updated: