[Vue 기초] vue-router 환경설정하기

저번 글을 통해 vue-cli 설치하고, 컴포넌트를 활용하는 것까지 작성하였습니다.

이번에는 

vue에서 SPA를 만들 수 있도록 하는 중요 개념인 vue-router에 대해 알아보도록 합시다.

 

---

 

1. vue-router란?

vue에서 경로에 따라 컴포넌트를 변경(전환)시킬 수 있는 라이브러리입니다.

이는 기존의 바닐라 js에서 흔히 말하는 화면 전환할 경우 생기는 "깜빡임"없이 작용하는 점에서 

VUE의 SPA 기능을 만듭니다.

 

 

2. vue-router 설치하기

1) cdn 이용하기

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2) npm 설치

npm install vue-router

 

 

3. router 설정하기

1) 먼저, router정보를 담아 둘 router.js 파일을 생성.

 

2) main.js에 router.js를 등록.

• import router from './router' : router파일을 임포트합니다.
• new Vue({ router, ~ }).$mount("#app") : #app에 마운트할 Vue인스턴스에 임포트한 router를 등록합니다.

이제 router 설치와 등록까지 마쳤으니, router.js 에서 router적용을 하고 싶은 컴포넌트들을 등록하면 됩니다.

 

3) router.js에서 컴포넌트와 경로 등록.

컴포넌트와 경로를 등록하는 문법은 아래와 같습니다.

" 해당 path에, 해당 component가 보여집니다 " 라는 의미로 해석하면 됩니다. 

routes:[
	{
    	path:'url 주소',
        component: 컴포넌트1
    },
    {
    	path:'url 주소',
        component: 컴포넌트2
    },
]

이를 적용하여 저는 예시로 작성해보았습니다.

참고로 mode: "hisitory"

mode:"history"로 설정을 안하면, 기본 설정은 "hash"입니다.

hash모드일 경우는 url에 "해쉬(#)"가 붙습니다.

"history"를 사용하면, 해쉬(#)를 제거합니다.

그러나, history모드일 경우 사용자가 직접 url에 접근할 때, 404에러가 나올 수 있습니다.

그래서 index.html의 중간 파일에 대해 서버에서 적정한 세팅을 취해주어야 합니다.

셋팅과정은 나중에 따로 글을 작성하겠습니다.

 

 

---

 

 

아래 링크는 vue-router의 공식문서입니다.
처음부터 끝까지 읽어보시면, 분명 도움이 될 것입니다.
https://router.vuejs.org/kr/