[vue-router] 시작하기

vue-router는 Vue.JS의 공식 라우터입니다. vue-router를 사용하면 싱글 페이지 어플리케이션을 쉽게 만들 수 있습니다. 이번 포스트에서는 vue-router를 프로젝트에 추가할 때 HTML단과 JavaScript단에서 추가하는 방법에 대해 이야기 할 것입니다.

1. HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 네비게이션을 위해 router-link 컴포넌트를 사용합니다. -->
    <!-- 구체적인 속성은 `to` prop을 이용합니다. -->
    <!-- 기본적으로 `<router-link>`는 `<a>` 태그로 렌더링됩니다.-->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 라우트 아울렛 -->
  <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
  <router-view></router-view>
</div>

<router-link>는 현재 라우트와 일치할 때 자동으로 .router-link-active 클래스가 추가됩니다.

2. JavaScript

// 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 하세요
// 그리고 `Vue.use(VueRouter)`를 호출하세요


// 1. 라우트 컴포넌트를 정의하세요.
// 아래 내용들은 다른 파일로부터 가져올 수 있습니다.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 라우트를 정의하세요.
// Each route should map to a component. The "component" can
// 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
// "component"는 `Vue.extend()`를 통해 만들어진
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체입니다.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. `routes` 옵션과 함께 router 인스턴스를 만드세요.
// 추가 옵션을 여기서 전달해야합니다.
// 지금은 간단하게 유지하겠습니다.
const router = new VueRouter({
  routes // `routes: routes`의 줄임
})

// 4. 루트 인스턴스를 만들고 mount 하세요.
// router와 router 옵션을 전체 앱에 주입합니다.
const app = new Vue({
  router
}).$mount('#app')

// 이제 앱이 시작됩니다!

위의 코드와 같이 vue-router을 vue에 주입하게 되면, 각각의 컴포넌트에서는 this.$router와 this.$route를 사용하여 vue-router를 사용할 수 있게 됩니다. 위의 예제는 CodePen에서 확인 할 수 있습니다.
this.$router는 vue-router의 메소드(push, replace 등.. 라우터 이동와 같은..)를 담고 있는 객체입니다.
this.$route는 현재의 라우터 정보(params, path 등..)를 담고 있는 객체입니다.

참고

• https://router.vuejs.org/kr/guide/#javascript