Vue Router

Vue Router 뷰 라우터

• 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리
• 라우터란 네트워크에서 데이터를 송수신하는 장치를 의미
• 웹에서 라우터는 웹 페이지 간의 이동하는 방법 및 경로를 설정

 

뷰 라우터 설치 - CDN

• vue링크 하단에 vue-router링크를 추가한다
• 인스턴스 VueRouter를 생성한다
• Vue의 router 속성에 사용할 라우터를 넣는다

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

var router = new VueRouter({ // VueRouter라는 인스턴스를 router라는 변수에 담음

});

new Vue({
    el: '#app',
    router: router // Vue의 속성 중에는 router가 있고, 여기에 위에서 정의한 변수 router를 넣음
});

 

 

라우터에 페이지 정보 넣기

• 인스턴스 VueRouter의 routes 속성에 이동할 페이지 정보를 넣는다
• 페이지 정보는 배열로 담고, 페이지 수만큼 객체를 만든다
• path: 페이지 url
• component: 페이지에 뿌려지 내용

var router = new VueRouter({
    // 어떤 url로 이동했을 때 뿌려질 페이지 정보
    routes: [ // routes 속성에 배열로 담음
    	// 페이지 개수만큼 객체 개수가 필요
        {
            path: '/login', // 페이지 url
            component: LoginComponent // 페이지에 뿌려질 내용
        },
        {
            path: '/main',
            component: MainComponent
        }
    ]
});

 

 

컴포넌트 정의하기

• 페이지에 뿌려질 내용을 따로 정의한다

var LoginComponent = {
    template: '<div>로그인에 보이는 내용</div>'
}
var MainComponent = {
    template: '<div>메인에 보이는 내용</div>'
}

 

 

<router-view> 태그 넣기

• router-view는 router로 페이지 이동했을 때 그 url에 따라 뿌려지는 내용의 영역이다
• router를 연결했을 때만 사용할 수 있는 태그

<div id="app">
    <router-view></router-view>
</div>

 

 

<router-link> 태그 사용하기

• router에서 페이지 이동을 하기위한 링크 태그
• router-link는 화면에 표시될 땐 <a>태그로 변환되서 나타남

<div id="app">
    <div>
        <router-link to="/login">Login</router-link>
        <router-link to="/main">Main</router-link>
    </div>
    <router-view></router-view>
</div>