[Vue.js 시작하기] 라우터

뷰 라우터

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션(spa)을 구현하거나, 페이지간 이동을 구현할 때 사용하는 라이브러리

페이지를 이동할 때 url이 변경되면, 변경된 요소의 영역에 컴포넌트를 갱신해주는 역할을 한다.(DOM을 갱신하는게 아니라 SPA의 특징대로 컴포넌트만 갱신해서 화면에 보여주는 것)

 

 

일반적 라우터랑 의미가 좀 다르게 사용되는 듯!

⚠️라우팅 : 네트워크에서 경로를 선택하는 프로세스, 상호 연결된 두 노드 간의 통신은 여러 경로를 통해 이루어질 수 있는데 라우팅은 미리 정해진 규칙을 사용하여 최상의 경로를 선택하는 프로세스이다. 

라우터는 컴퓨팅 디바이스와 네트워크를 다른 네트워크에 연결하는 네트워킹 디바이스이다. 라우터는 주로 3가지 기본 기능을 수행한다. 

1. 경로 결정

2. 데이터 전달

3. 로드 밸런싱

 

참고: aws 공식 사이트

https://aws.amazon.com/ko/what-is/routing/

라우팅란 무엇입니까? - 네트워크 라우팅 초보자 설명서- AWS

 

뷰 라우터 등록

// 라우터 인스턴스 생성
var router = new VueRouter({
	// 라우터 옵션
})

// 인스턴스에 라우터 인스턴스를 등록
new Vue({
	router: router
})

뷰 라우터 옵션(routes, mode)

• routes : 페이지의 정보들이 들어가는 속성
  • path : url
  • component : 페이지로 이동했을 때, 뿌려지는 속성

⚠️참고 : 인스턴스를 생성할 때는 components, routes에는 component(한 페이지에는 하나의 component이므로!)

• mode: ‘history’ : url에 #를 없앨 수 있다.

router-view

브라우저의 주소 창에서 URL이 변경되면, 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려짐. 이때 뿌려지는 지점

router-link

화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 함

<div>
  <router-link to="/login"></router-link>
</div>