[Vue.js] 라우터 & HTTP 통신

뷰 라이팅이란?

웹 페이지 간의 이동 방법을 말한다. 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA,Single Page Application)에서 주로 사용한다.

뷰 라이팅의 장점

• 화면 간의 전환이 매끄럽고, 사용자 경험을 향상 시킨다.
• 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타나는데 이를, 라우팅으로 처리시 화면을 매끄럽게 전환 시켜준다.

💻 뷰 라우터

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

태그	설명
<router-link to="URL 값">	페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동한다.
<router-view>	페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역이다.

<div id="app">
        <h1>뷰 라우터 예제</h1>
        <p>
            1️⃣ <router-link to="/main">Main 컴포넌트로 이동</router-link>
            <router-link to="/login">Login 컴포넌트로 이동</router-link>
        </p>
        2️⃣<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>
        3️⃣var Main = { templeate : '<div>main</div>'};
        var Login = { templeate : '<div>login</div>'};

        4️⃣var routes = [
            { path : '/main', component : Main },
            { path : '/login', component : Login }
        ];

        5️⃣var router = new VueRouter({
            mode : 'history',
            routes
        });

        6️⃣var app = new Vue({
            router
        }).$mount('#app');
    </script>

• 1. URL 값을 변경하는 태그
• 2. URL 값에 따라 갱신되는 화면 영역
• 3. Main, Login 컴포넌트 정의
• 4. 각 URL에 맞춰 표시할 컴포넌트 지정
• 5. 뷰 라우터 정의 ( mode : history 를 사용하여 라우터의 URL에 해시 값을 없앤다.)
• 6. 뷰 인스턴스에 라우터 추가

네스티드 라우터

네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조이다.

네임드 뷰

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