시작하며

이 글은 Vue.js 2.* 버전을 사용하고 프로젝트가 vue-cli를 통해 webpack 환경으로 구성되어 있는 것을 전제로 합니다.

최근 vue-cli webpack 템플릿에 vue-router가 통합되었습니다! vue-cli로 프로젝트를 생성하면 자동으로 vue-router가 함께 설치됩니다. 이 포스트는 쓰지마자 낡은 문서가 되었어요 😭

VueRouter 설치하기

npm install vue-router --save

VueRouter 불러오기

import Vue from 'vue'
// 이곳에 VueRouter를 불러옵니다.
import VueRouter from 'vue-router'

// Vue에 VueRouter를 연결합니다.
Vue.use(VueRouter)

main.js에 VueRouter를 불러옵니다.

컴포넌트 불러오기

// 라우트 컴포넌트 정의
const Home = App.components.Home
const Login = App.components.Login

main.js에 라우팅할 컴포넌트를 불러옵니다.

라우트 정의

// 라우트 정의
const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login }
]

main.js에 라우트를 정의합니다.

라우터 정의

// 라우터 인스턴스 생성
const router = new VueRouter({
  mode: 'history', // history 모드를 사용하면 주소창에 hash가 없어집니다.
  routes // routes: routes 의 약어
})

history mode를 사용하면 URI가

localhost/#/login에서 localhost/login으로 변경됩니다.

history mode를 사용할 때 주의해야할 점을 참고하세요.

Vue 인스턴스에 라우터 마운트하기

new Vue({
  store,
  router, // 이 부분을 추가합니다.
  el: '#app',
  template: '<App/>',
  components: { App }
}).$mount('#app') // 이 부분도요

App 컴포넌트에 라우트 컴포넌트 불러오기

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

App.vue 컴포넌트에<router-view></router-view>를 추가합니다. 이제 라우팅을 통해 연결한 컴포넌트가 router-view 영역에 렌더링 됩니다.

이제 빌드해보면 에러가 납니다. main.js에 불러왔던 컴포넌트를 App.vue 컴포넌트에도 불러와야 합니다.

<script>
import Home from './components/Home' // 추가해주세요.
import Login from './components/Login' // 추가해주세요.

export default {
  name: 'app',
  components: {
    Home, // 추가해주세요.
    Login // 추가해주세요.
  }
}
</script>

마치며

정말 쉽죠? 끝으로 Vue.js와 사랑에 빠지시면 됩니다.

👍

❤️

😄

😝