1. vue-router란

공식 사이트에 의하면 Vue Router는 Vue.js의 공식 라우터로 Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있다고 한다.

2) Vue Router 기능

vue router의 기능은 아래와 같다.

1) 중첩된 라우트/뷰 매핑
2) 모듈화된, 컴포넌트 기반의 라우트 설정
3) 라우터 파라미터, 쿼리, 와일드카드
4) Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과
5) 세밀한 네비게이션 컨트롤
6) active CSS 클래스를 자동으로 추가해주는 링크
7) HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백)
8) 사용자 정의 가능한 스크롤 동작

위와 같은 기능들에 대해서는 앞으로 작성할 포스팅에서 예시와 함께 자세히 다뤄보려고 한다.

2. 설치

1) NPM

npm i vue-router@4

2) yarn

yarn add vue-router@4

3) 직접 다운로드 / CDN

https://unpkg.com/vue-router@4
버전/ 태그 지정 예시)
https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js

3. 시작하기

router를 관리하기 위해 별도 파일을 생성해서 router를 추가한다.
이 때 router와 연결될 컴포넌트들은 src/views 폴더로 이동시킨다.

src/routes/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'
import Create from '../views/Create.vue'
import Mypage from '../views/Mypage.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: Home },
        { path: '/create', component: Create },
        { path: '/mypage', component: Mypage },
    ]
})
export default router;

createRouter, createWebHistory는 v4.x에서 도입된 내용으로 Vue 라우터를 사용하기 위해 불러와야하는 메서드이다.
createRouter: 라우터 생성
createWebHistory: history 모드 중 하나인 HTML5 mode(이전 버전의 history mode와 동일 )

파일을 작성했다면 index.js에서 작성한 라우터를 main.js에 등록해준다.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js'
import "./assets/css/main.css"

createApp(App).use(router).mount('#app')

생성한 vue app에 router를 연결해준다.

참고 - Vue Router 공식 문서
https://next.router.vuejs.org/guide/