뷰 라우터는 뷰 라이브러리를 이용해 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다.

라우터 설치

CDN 방식과 NPM 방식 두가지가 있다.

CDN 방식으로 사용하기

<!-- 1. vue.js 스크립트 -->
<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
<!-- 2. router 스크립트 -->
<script src="<https://unpkg.com/vue-router/dist/vue-router.js>"></script>
<script>
  new VueRouter({

  });
  
  new Vue({
    el: '#app'
  })
</script>

NPM 방식으로 사용하기

npm install vue-router

라우터 연결 확인하기

router 라는 변수에 VueRouter 를 불러온다. Vue 인스턴스 안에서 router가 유효해진다.

// 라우터 인스턴스 생성
var router = new VueRouter({
  // 라우터 옵션
});

// 인스턴스에 라우터 인스턴스 등록
new Vue({
  el: '#app',
  router: router
})

뷰 개발자도구에서 <Root> 엘리먼트 클릭시 아래와 같은 라우터 속성 리스트가 나타난다

만약 인스턴스 내에서 라우터 속성을 제거한다면 아래와 같이 콘솔에 에러가 표시된다

routes 속성

라우터 속성은 페이지의 라우팅 정보를 표현한다. 라우팅 정보란, 어떤 URL로 이동했을 때 어떤 페이지가 뿌려질지에 대한 정보이며 배열로 작성한다. 배열 내부에는 페이지 갯수만큼 객체의 갯수가 필요하다.

자세한 작성 문법, 규칙은 아래 코드에서 살펴볼 수 있다.

var LoginComponent = {
  template: '<div>login</div>'
}
var MainComponent = {
  template: '<div>main</div>'
}
var router = new VueRouter({
  routes: [
    // 로그인 페이지 정보
    {
      // 페이지의 url
      path: '/login',
      // 해당 url에서 표시될 컴포넌트 (components가 아닌 component)
      component: LoginComponent
    },
    // 메인 페이지 정보
    {
      // 실습 문제: url은 main, 컴포넌트 이름은 MainComponent
      path: '/main',
      component: MainComponent
    }
  ]
});

대부분의 SPA 앱에서는 아래와 같이 2개 옵션을 필수로 지정한다.