Vue 동적 세그먼트 활용 동적 라우트 매칭 (+404 Not Found Route)

Vue Router의 동적 세그먼트를 활용한 동적 라우트 매칭

🍀 동적 세그먼트란?

- 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야할 때 사용한다.

 

예를 들면 ...

사용자 목록	/users
사용자 상세	/users/tay

사용자 목록인 /users 에 매핑된다면, 사용자 상세는 /users/tay 처럼 사용자별로 같은 컴포넌트에 매핑되어야 한다.

이럴 때 vue router 경로에서 '동적 세그먼트'를 사용하여 해결한다.

 

 

🍀 route의 param으로 동적 세그먼트

/users/:id

- 동적 세그먼트는 콜론(:)으로 표시한다.

- 컴포넌트에서 동적 세그먼트의 값은 $route.params로 접근할 수 있다.

 

route의 param 동적 세그먼트 접근 방법

(1) vue router 설정한다. → path: '/users/:username/posts/:postId'

(2) url을 '/usrs/tay/posts/123' 로 접근한다.

(3) 해당 컴포넌트에서 $route.params 확인 시 → { username: 'tay', postId: '123' }

 

 

🍀 route의 query, hash

- $route 객체는 $route.param외에도 $route.query(쿼리스트링), $route.hash(해시태그) 등과 같은 다른 유용한 정보도 노출한다.

 

※ 주입된 속성 $router & $route

- $router & $route는 라우터 인스턴스를 루트 인스턴스에 router 옵션으로 전달함으로써 전역으로 주입이된다.

- $router은 라우터 인스턴스이다.

- $route는 현재 활성화된 라우트 정보를 접근할 수 있다. 변경은 할 수 없다.

 

query 활용 및 접근 방법

(1) url을 '/users?searchText=love' 로 접근한다.

(2) 해당 컴포넌트에서 $route.query 확인 시 →  { searchText: love }

 

hash 활용 및 접근 방법

(1) url을 '/users/alice#profile' 로 접근한다.

(2) 해당 컴포넌트에서 $route.hash 확인 시 → '#profile'

 

param, query, hash 전부 활용 및 접근 방법

(1) vue router 설정한다. → path: '/users/:username'

(2) url을 '/users/tay?firstName=kim#frontend' 로 접근한다.

(3) 해당 컴포넌트에서 $route 확인 시 → { params: {username: 'tay'}, query: { firstName: kim }, hash: '#frontend' }

 

※ 세그먼트에 정규식 활용 (404 Not Found Route 만들기에 유용함)

{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

- 일반적으로 vue router path에 설정된 파라미터(:id)는 슬래쉬(/)로 구분된 url 사이의 문자만 일치시킨다.

- 즉, path에 등록된 url만 컴포넌트를 불러온다.

- 하지만 등록되지 않은 url을 호출했을 때 404페이지 컴포넌트를 불러오고 싶다면 등록된 url 외에 모든것을 path에 일치시켜야한다.

- 모든 것을 일치시키려면 Vue Router에서 param 바로 뒤에 괄호 안에 정규식(regexp)을 활용할 수 있다.