[Vue.js] Vue 라우터

Vue 라우터(Router)

• Vue에서 라우팅 기능을 제공하는 공식 라이브러리
• 라우트(경로)를 찾아내는 역할을 하는 장비

Vue Router

라우팅(Routing)

• URL 주소에 따라 페이지가 전환되는 것
  • Vue는 URL 주소에 따라 화면 컴포넌트인 View가 전환
• 라우트(경로)를 찾는 행위

라우트(Route)

• URL 주소, 경로

기능

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

 

---

설치 방식

1. 전역 스크립트 태그 방식

<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.js"></script>

 

2. Vue CLI 방식(프로젝트 폴더에 추가)

터미널창 : vue add router

 

라우터 모듈: router/index.js

• 라우트(route)  정의 및 라우터(router) 인스턴스 내보내기

 

참고)

Router란?