Vue Router 정리

<RouterView>

페이지가 출력(렌더링)되는 영역 컴포넌트입니다.

 

 

<RouterLink>

페이지 이동을 위한 링크 컴포넌트입니다.

 

$route

Route(페이지) 정보를 가지는 객체입니다.

대표적으로 fullPath, params속성이 있습니다.

$route는 정보를 조회하는데 많이 사용되며, 여러 속성이 존재합니다.

$router

Route(페이지) 조작을 위한 객체입니다.

대표적으로 push 메소드를 이용해서 이동을 했습니다.

$route는 정보를 조작하는데 많이 사용되며, 여러 메소드가 존재합니다.

 

링크 분해

https://google.com/blog/123?apikey=abcd234&name=Skye 

 

예를 들면 위에 링크가 존재합니다.

여기서 google.com은 도메인입니다.

 

/blog/123?apikey=abcd234&name=Skye 는 fullPath입니다.

fullPath는 $route에 있는 속성입니다.

 

/blog/123 는 params입니다.

해당 페이지의 경로를 추출할 수 있습니다.

params도 $route에 있는 속성입니다.

 

?뒤에는 해당 페이지를 접근할 때 필요한 일종의 데이터입니다.

데이터를 주소 링크에 포함되게 작성한 것을 쿼리스트링입니다.

?뒤에는 query속성을 통해 조회할 수 있습니다. 

여기서는 key=value형태로 작성됩니다. (ex. apikey가 key며, abcd234는 value입니다.)