Vue.js Router 설치방법

📌 라우팅이란?

라우팅이란, 우리가 어떤 웹 페이지에 접속했을 때 혹은 버튼이나 링크를 클릭하면 화면이 바뀌는 것. 지금 이 순간에도 접하고(?) 있다. 나도 개발자라는 직업을 가지지 않았다면 정말 주의 깊게 살펴보진 않았을 것이다. 아무튼, 이때 브라우저 창을 보면 유저가 클릭하여 웹 브라우저가 바뀔 때 URL 주소 즉, 상태 표시줄 같은 웹 주소가 바뀌는 것을 볼 수 있을 것이다.

 

https://sungjaecloud.tistory.com/289

내가 React가 아닌 Vue.js를 선택한 이유

앞서 내가 작성한 위 게시물 게시물에도 간략하게 설명해 놓았지만, 리액트 앵귤러 뷰 같은 싱글페이지 애플리케이션(Single Page Application)의 경우 페이지를 이동할 때마다 이미 만들어 놓은 페이지를 불러오는 방식으로 페이지를 전환시키는 데 이것을 쉽게 라우팅이라 한다.

Vue 프로젝트 내부에서는 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해놓는다. 사용자가 메뉴를 클릭하거나, 브라우저 주소를 직접 갱신했을 때 미리 정의된 url 주소에 해당하는 Vue 페이지로 화면을 전환시킨다.

도서 : Vue.js 프로젝트 투입 일주일 전 참조

 

https://www.youtube.com/watch?v=cSH97mtk7MU 

📌 VueRouter 설치방법

• Visual Studio Code를 켜고, 터미널을 연다.
• vue add router
  혹은
• npm install vue-router@4
• npm run serve로 로컬 서버 열기

 

Vue-Router는 위 2가지 방식 아무거나 선택해서 설치해도 무방하지만, Vue.js 공식 문서에 의하면 npm install vue-router@4 방식으로 설치하길 권장한다. 아마도 최신버전으로 설치할 수 있기 때문인 듯하다.

 

필자는 손가락 가는 대로 선택하여 설치하지만, 보통 npm install vue-router@4로 많이 설치하여 사용한다.

 

vue add router로 설치했을 경우에는 기본적인 세팅이 바로 되는 듯했고, vue.js에서 권장하는 방식대로 설치하면 내가 웹팩 템플릿으로 이미 만들어 놓고 사용해서인지는 몰라도 기본 세팅이 안 되는 듯했다.(정확한 건 아니지만) Vue-Router에 대해 조금이라도 알아보려고 한다면 세팅 방식도 공부해보면 좋을 것 같다.