Vue.js 프로젝트에 뷰 라우터 (Vue Router) 설치하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

 

Vue.js 개발하는 도중, 웹 어플리케이션 개발시 가장 기본적인 기능 중 하나인 '라우팅 기능'을 이용하고 싶더라구요.

뷰에서 라우팅 기능은 '뷰 라우터'로 공식적으로 지원하는 라이브러리로 npm에서 설치할 수 있도록 지원하고 있어 npm 명령어를 통해 설치 및 연동하였습니다.

 

---

뷰 라우터 (Vue Router)

뷰 라우터란 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다.

뷰 라우터는 총 3가지로 구분할 수 있으며, 자세한 사항은 각각 아래의 링크를 참조해주세요.

• 기본 라우터: https://logs-jejustone.tistory.com/19
• 네스티드 라우터: https://logs-jejustone.tistory.com/20
• 네임드 뷰: https://logs-jejustone.tistory.com/21

 

뷰 라우터(Vue Router) 설치

VSCode에서 Vue Router를 설치하는 과정입니다.

 

1. 설치한 VSCode에서 터미널(Terminal) 창을 엽니다. 

• 방법:
  • 키보드: Ctrl + Shift + `
  • 마우스: VSCode 상단의 Terminal 클릭 > New Terminal 클릭

 

2. Vue Router 설치 명령어를 터미널에 입력하고 엔터를 클릭합니다.

• 명령어: npm i vue-router@next

 

3. 설치가 완료되었는지 터미널에 표시된 메시지를 통해 확인합니다.

정상적으로 설치가 진행되었다면, 가장 아래에 "found 0 vulerabilities"라고 표시됩니다. 

 

 

뷰 라우터(Vue Router) 연동 및 테스트

뷰 라우터 중에서 가장 기본적인 뷰 기본 라우터를 사용하여 뷰 라우터가 정상적으로 연동되었는지 확인합니다.

해당 과정은 아래 링크를 참조하여 진행해주세요.

https://logs-jejustone.tistory.com/19

 

 

 

---

References

• Vue.js 개발환경 구축하기: https://logs-jejustone.tistory.com/2

[Vue] VSCode로 Vue.js 개발 환경 구축하기