[Vue.js] vue-router #2 - 동적 라우트 매칭

본 포스팅은, 뷰 라우터 공식 문서(https://router.vuejs.org/kr/guide/essentials/history-mode.html)와
'캡틴판교의 Cracking Vue.js' 내용에 기반하여 작성된 포스팅입니다.
자세한 내용은 공식 문서와 '캡틴판교의 Cracking Vue.js'를 참조해주세요!

1. 동적 라우트 매칭

주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야 하는 경우가 자주 존재한다.
'회원 정보 페이지' User 컴포넌트를 예로 들면 모든 사용자에 대해 동일한 레이아웃을 가지지만, 사용자 ID에 따라 다른 데이터를 렌더링 해주어야 한다.
이 때, vue-router의 동적 세그먼트 기능을 활용하면 이를 구현해낼 수 있다.

const router = createRouter({
  routes: [
    // 동적 세그먼트는 콜론으로 시작
    { path: '/user/:id', component: User }
    // /user/1, /user/2은 모두 같은 경로에 매핑이 된다.
  ]
})

동적 세그먼트
(Vue 2.x 기준 / 바로 아래에서 vue 3 환경에서의 params 접근 방법에 대해 소개)

• 콜론 :로 표시

• 라우트가 일치하면 동적 세그먼트의 값은 모든 컴포넌트에서 this.$route.params로 표시된다.

• 그러므로 User의 템플릿을 다음과 같이 갱신하여 현재 사용자 ID를 표현할 수 있다.

2. 동적 라우터 매칭 예제 (Vue 3)

하지만, vue 3에서는 this 바인딩을 지원하지 않기 때문에, 기존 Vue2처럼 this.$route를 통한 params 접근은 불가능하다. 따라서, Vue3에서는 vue-router 객체를 직접 import해서 가져와야 한다.

import { useRoute } from 'vue-router'

const route = useRoute();
const User = {
  template: '<div>User {{ route.params.id }}</div>'
}

동일한 라우트에 여러 동적 세그먼트를 가질 수 있으며, route.params의 해당 필드에 매핑된다.

출처 (https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html)

route.params 외에도 route 객체는 route.query (URL에 쿼리가 있는 경우), route.hash 등의 유용한 정보를 제공

3. Params 변경 사항에 반응하기

매개 변수와 함께 라우트를 사용할 때 주의 해야 할 점은 동일한 컴포넌트 인스턴스가 재사용된다는 점이다. 두 라우트 모두 동일한 컴포넌트를 렌더링하므로 이전 인스턴스를 삭제 한 다음 새 인스턴스를 만드는 것보다 효율적이다. 그러나, 이는 또한 컴포넌트의 라이프 사이클 훅이 호출되지 않음을 의미한다.
(이미 기존에 생성되어 있으면, 라이프 사이클 훅이 처음부터 수행되는 것이 아니라 기존에 만들어진 상태에서 불러짐)

Params 변경 사항에 반응하는 방법

1. 동일한 컴포넌트의 params 변경 사항에 반응하려면 route 객체를 watch하면 된다.

// vue 2.x
const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 경로 변경에 반응하여...
    }
  }
}

// vue 3.x
import { watch } from 'vue';

watch(route);
// 요론식으로?

또는 beforeRouteUpdate 가드를 사용하면 된다.

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

4. 매칭 우선순위

동일한 URL이 여러 라우트와 일치하는 경우가 있다.
이 경우, 일치하는 우선 순위는 라우트 정의 순서에 따라 결정된다