본 포스팅은, 뷰 라우터 공식 문서(https://router.vuejs.org/kr/guide/essentials/history-mode.html)와
'캡틴판교의 Cracking Vue.js' 내용에 기반하여 작성된 포스팅입니다.
자세한 내용은 공식 문서와 '캡틴판교의 Cracking Vue.js'를 참조해주세요!
Vue 라이브러리를 이용하여 SPA를 구현할 때 사용하는 페이지 이동 라이브러리
주요 기능
- 중첩된 라우트/뷰 매핑
- 라우터 파라미터, 쿼리, 와일드 카드 설정
- Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과
- HTML5 히스토리 모드 또는 해시 모드 등등
npm install vue-router
// Vue 2.x 환경
// 1. 라우터 인스턴스 생성
var router = new VueRouter({
// 라우터 옵션
})
// 2. 인스턴스에 라우터 인스턴스를 등록
import router from './router'
new Vue({
router: router
})
// Vue 3.x 환경
import router from './router'
const app = createApp(App)
.use(router);
vue-router 3에서의 라우터 옵션 설정 방법인 mode : 'history'
에서 더 유ㅇ연한 옵션으로 대체됨.
사용 중인 모드에 따라 적절한 기능으로 교체
"history"
: createWebHistory()
"hash"
: createWebHashHistory()
"abstract"
: createMemoryHistory()
// router/index.js로써 관리
import { createRouter, createWebHistory } from 'vue-router'
createRouter({
history: createWebHistory(),
routes: [
{ path: '/login', component: LoginComponent },
{ path: '/home', component: HomeComponent }
]
})
history mode
- 라우팅을 할 때 URL에
#
값을 제거하고, URL값이/login
과/home
일 때 각각 로그인 컴포넌트와 홈 컴포넌트를 뿌려줌
브라우저의 주소 창에서 URL이 변경되면, 앞에서 정의한 routes 속성(#3.)에 따라, 화면에 컴포넌트가 뿌려진다. 이 때 뿌려지는 지점이 템플릿의 router-view
이다.
<div id="app">
<router-view></router-view> <!-- LoginComponent 또는 HomeComponent -->
</div>
앞에서 정의한 라우팅 옵션 기준으로 /login
은 로그인 컴포넌트를 /home
은 홈 컴포넌트를 화면에 표시
화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 돕는 태그 (== a 태그)
<div>
<router-link to="/login"></router-link>
</div>
이 때, 위 코드를 실행하면 화면에서는 <a>
태그로 변형되서 나옴 때문에 <a>
를 클릭하면, /login
URL로 이동