[Vue.js] Vue-Router 설치 및 적용하기

라우팅(Routing) 이란 데이터를 보낼 때 경로를 찾아가는 과정을 말한다. 

• 서버 라우팅 : 매번 주소를 요청할 때마다 화면이 갱신됨 ex) 네이버, 구글
• 브라우저 라우팅 : 주소를 요청하더라도 필요한 데이터만 가져와서 따로 갱신됨, 효율적으로 화면을 갱신할 수 있음 ex) 구글메일, 트렐로

vue 에서 라우터를 이용하여 싱글 페이지 앱을 만들 수 있고, 라우터에 컴포넌트를 맵핑한 후 어떤 주소를 렌더링 할 것인지 알려주면 vue router 기능을 사용할 수 있다.

 

vue.js 동작원리 

main.js > route 혹은 App.vue 로 이동 > router에 설정한 페이지로 이동

 

https://router.vuejs.org/kr/guide/

시작하기 | Vue Router

 

 

vue-router 설치

npm i vue-router --save--dev

vue에서 router를 사용하기 편하도록 vue-router 라이브러리를 설치한다. 

 

main.js

import VueRouter from 'vue-router'

Vue.use(VueRouter)

설치 한 후 main.js 에 vueRouter를 import 하고 선언해준다.

 

const Login = { template: '<div>Login Page</div>' }
const NotFound = { template: '<div>Page not found</div>' }



const router = new VueRouter({
  mode: 'history',
  routes : [
    { path: '/', component: App },
    { path: '/login', component: Login },
    { path: '*', component: NotFound }
  ]
})

new Vue({
  el: '#app',
  router,
  render: h => h({template: '<router-view></router-view>'})
})

router 경로와 component를 연결시켜주었고, 각 route에 맞게 rendering 하였다.

• 경로 '/' - App.vue로 이동
• 경로 '/login' - Login 함수 template적용
• 지정된 경로 없을 경우 - NotFound 함수 template 적용

크롬 브라우저에서 해시모드일 경우 # 경로가 앞에 붙게 되는데(예- localhost:8080/#/login ) mode : 'history'를 추가해줄 경우 # 경로가 적용되지 않게 되어 localhost:8080/login 로 이동이 가능하다.

 

[ 적용된 결과 ]

 

router 폴더 따로 만들어 리팩토링

main.js 에 있던 router 설정들을 router라는 폴더를 만들어서 index.js로 이동시켜 따로 router들을 관리해보았다.

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

Vue.use(VueRouter)

const Login = { template: '<div>Login Page</div>' }
const NotFound = { template: '<div>Page not found</div>' }



const router = new VueRouter({
  mode: 'history',
  routes : [
    { path: '/', component: App },
    { path: '/login', component: Login },
    { path: '*', component: NotFound }
  ]
})


export default router

 

관련 router설정 들을 복사해서 붙여넣고, 모듈로 만들어서 export 하였다.

 

App.vue

import Vue from 'vue'
import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h({template: '<router-view></router-view>'})
})

만든 router 모듈을 App.vue로 import 시켜준다. 경로는 router 폴더로 잡으면 하위 경로에 있는 모든 파일들이 적용된다.