뷰 라우터

뷰 라우터와 HTTP통신

뷰 라우터 - 뷰 페이지 전환을 위한 공식 라이브러리

라우팅 Routing 은 웹 페이지 간의 이동 방법이다.

웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 사용한다.

 

싱글 페이지 애플리케이션은 페이지를 이동할 때마다 서버에 웹 페이지를 요청하고 새로 갱신하지 않고, 미리 해당 페이지를 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이용해 화면을 갱신하는 패턴을 적용한 애플리케이션이다.

장점은 페이지간 전환시 깜빡임 없이 부드럽게 전환하며 화면 조작이 빨라 사용자 경험이 향상된다. 

 

뷰, 리엑트, 앵귤러 같은 프런트엔드 프레임워크 사용을 하지 않고도, HTML 과 라우팅 자바스크립트 라이브러리를 이용해 라우팅 방식의 페이지 이동을 구현할 수 있다. 대표적인 라우팅 라이브러리는 router.js 와 navio.js 가 있다.

 

tildeio/router.js

krasimir/navigo

뷰 라우터 Vue Router

뷰에서 라우팅 기능을 구현할 수 있게 하는 공식 라이브러리이다.

이 뷰 라우터는 뷰로 만든 페이지 간에 자유롭게 이동하게 한다.

// 페이지 이동 태그
// 화면에서 <a>로 표시 
// 클릭하면 to 에 지정한 URL로 이동

<router-link to="URL">

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

<router-view>

<div id="app">
    <h1>뷰 라우터 예제</h1>
    <p>
        <router-link to="/main">메인</router-link>
        <router-link to="/login">로그인</router-link>
    </p>
    <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 }
    ];

    var router = new VueRouter({
        routes
    });

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

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

인스턴스 생성시 el 속성을 넣지 않았어도 생성하고 난후 $mount()를 이용하면 강제로 인스턴스를 화면에 붙인다.  

네스티드 라우터 Nested Router

라우터로 페이지 이동을 할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다. 

상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조이다.

네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의 하위 컴포넌트를 다르게 표시할 수 있다. 

<div id="app">
    <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 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
    });

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

네임드 뷰 Named View

많은 컴포넌트를 동시에 표시하는 라우터 방식

같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시할 때 사용한다. 

<div id="app">
    <router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></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 appBody = { template: '<div>Body Area</div>' };
    var appHeader = { template: '<div>Header Area</div>' };
    var appFooter = { template: '<div>Footer Area</div> '};

    var router = new VueRouter({
        routes: [
            {
                path: '/',
                components: {
                    default: appBody,
                    header: appHeader,
                    footer: appFooter
                }
            }
        ]
    });

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

뷰 HTTP 통신