[vue 2 기초] 라우터

라우터는 뷰 라이브러리를 이용하여 SPA(Single Page Appliaction) 구현을 할 때 사용하는 라이브러리이다.

 

1. 라우터 연결

라우터를 사용하기 위해서는 CDN 방식 혹은 NPM 방식으로 설치할 수 있다.

 

CDN 방식은 script 태그에 CDN 링크를 추가해서 연결을 하는 방식이고

NPM 방식은 Vue CLI로 프로젝트를 생성하거나 NPM 기반으로 프로젝트를 생성해서 라우터 설치 명령어 입력을 통해 설치한다.

<!-- CDN 방식 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-router@3"></script>
  
<!-- NPM 방식(아래 명령어 입력) -->
npm install vue-router@3

 

위와 같이 설치한 뒤 아래 소스와 같이 뷰 라우터를 등록할 수 있다.

 

var router = new VueRouter({
    // 라우터 옵션
});
 
// 인스턴스에 라우터 인스턴스를 등록
new Vue({
    router: router,     //  라우터 인스턴스의 변수명으로 등록
});

 

2. 라우터 옵션

라우터를 연결 및 등록한 뒤 라우터를 사용할 때 라우터 옵션을 지정한다.

2가지의 필수 옵션이 있다.

 

- routes: 라우팅 할 URL과 컴포넌트 값 지정(페이지의 라우팅 정보)

- mode: URL의 해쉬 값 제거 속성

 

var LoginComponent = {
    template: '<div>Login</div>'
}
var MainComponent = {
    template: '<div>Main</div>'
}
 
var router = new VueRouter({
    mode: 'history',
    routes: [   // 배열 형식으로 지정
        {
            // 페이지의  url 이름
            path:'/login',
            // 해당 url에서 표시될 컴포넌트
            component: LoginComponent,
        },
        {
            path: '/main',
            component: MainComponent,
        }
    ]
});

 

위와 같이 라우터 옵션들을 입력해서 특정 컴포넌트들을 세부 페이지처럼 사용할 수 있게 url을 지정하고 연결해준다.

 

3. router-view

라우터 옵션으로 라우터를 컴포넌트와 연결하고 화면에 해당 컴포넌트를 뿌릴 때 router-view를 사용한다.

<div id="app">
    <router-view></router-view><!-- 라우터에 등록한 LoginComponent 혹은 MainComponent를 화면에 보여준다 -->
</div>

 

localhost:0000/router.html/login 으로 url을 입력시 LoginComponent 내용이,

localhost:0000/router.html/main 으로 url을 입력시 MainComponent 내용이 <router-view> 영역에 뿌려진다.

 

4. router-link

사용자들이 일반적인 웹 페이지에서 a태그를 통해 링크 이동을 하여 페이지를 탐색하듯

vue 화면에서 특정 링크를 클릭해서 화면을 이동할 수 있게 해주는 것이 router-link 이다. (실제 html 소스상에 <router-link> 는 a태그로 출력된다.)

<div id="app">
    <!-- <router-link to="이동할 URL"></router-link> -->
    <router-link to="/login">로그인</router-link>
    <router-link to="/main">메인</router-link>
 
    <router-view></router-view> <!-- routerlink를 클릭할 때마다 to에 연결된 url의 화면이 출력된다. -->
</div>
 
<!-- 출력
<a href="/login">로그인</a>
<a href="/main">메인</a>
-->

 

 

---

출처

인프런 'Vue.js 시작하기 - Age of Vue.js' 강좌