라우팅(Routing) 이란 데이터를 보낼 때 경로를 찾아가는 과정을 말한다.
- 서버 라우팅 : 매번 주소를 요청할 때마다 화면이 갱신됨 ex) 네이버, 구글
- 브라우저 라우팅 : 주소를 요청하더라도 필요한 데이터만 가져와서 따로 갱신됨, 효율적으로 화면을 갱신할 수 있음 ex) 구글메일, 트렐로
vue 에서 라우터를 이용하여 싱글 페이지 앱을 만들 수 있고, 라우터에 컴포넌트를 맵핑한 후 어떤 주소를 렌더링 할 것인지 알려주면 vue router 기능을 사용할 수 있다.
vue.js 동작원리
main.js > route 혹은 App.vue 로 이동 > router에 설정한 페이지로 이동
https://router.vuejs.org/kr/guide/
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 폴더로 잡으면 하위 경로에 있는 모든 파일들이 적용된다.
'Frontend > Vue.js' 카테고리의 다른 글
Vue.js - 라우터링크(router-link) (0) | 2021.12.14 |
---|---|
Vue.js - 라우터뷰(Router view) (0) | 2021.12.14 |
Vue-Cli로 Vue.js 프로젝트 생성하기 (0) | 2021.12.14 |
vuetify SASS Variables를 활용한 Style Custom (0) | 2021.12.13 |
Vuetify 소스 파일 구조 알아보기 (0) | 2021.10.04 |