[Vue2] vue-router 사용하는 방법

Vue 2 Router

요즘 Angular2, React에 이어서 정말 많은 점유율을 가지고 있는 것이 Vue2 입니다. 그리고 VueJS를 사용하기 위해서 꼭 함께 사용하는 플러그인이 vue-router 입니다.

단일페이지의 애플리케이션 구현 시 컴포넌트들을 route에 매핑하여 vue-router가 어디에 렌더링 할 지 지정하는 것입니다.

이처럼 vue-router를 사용하면 단일페이지의 애플리케이션이지만 여러 페이지의 애플리케이션 같은 효과를 낼 수 있습니다.

vue-router 설치

vue-router를 사용하려면 먼저 설치를 해야겠죠? 설치는 NPM을 사용합니다.

npm install vue-router --save-dev

HTML 파일

// index.html


    

        

            

                router#1
                router#2
            
        
    
    

        
    
    

Main JS 파일

// vue.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
    routes
})

const app = new Vue({
    router
}).$mount('#app')

Routes JS 파일

// routes.js

const routes = [
    { path: '/router1', component: { template: '
Router 1
' } },
    { path: '/router2', component: { template: '
Router 2
' } }
]

export default routes

결과