[vue-router] 동적 라우트 매칭

패턴을 가진 라우트를 동일한 컴포넌트에 매칭시켜야 할 경우가 종종 있습니다. 예를 들면, User 컴포넌트가 있고, /user/1 혹은 /user/2와 같은 라우트에 접근할 때, 라우트에 매칭된 ID에 해당하는 유저 정보를 User 컴포넌트에 나타내야 한다면,

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 동적 세그먼트는 콜론으로 시작합니다.
    { path: '/user/:id', component: User }
  ]
})

위의 코드와 같이 vue-router 설정을 할 수 있습니다.
/user/1와 /user/2는 모두 동일한 컴포넌트에 매칭됩니다. 동적 세그먼트는 콜론(:)으로 표시됩니다. 동적 세그먼크 값은 모두 this.$route.params에 표시됩니다.

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

위의 코드와 같이 사용자 ID를 표시할 수 있습니다. 여러개의 동적 세그먼트를 가질 수 있습니다. 모든 세그먼트는 this.$route.params에 매칭됩니다.
this.$route는 this.$route.params 뿐만 아니라, this.$route.query(URL 안에 쿼리가 있다면), this.$route.hash 등의 정보를 제공합니다.

1. Params 변화 감지

/user/1와 user/2로 라우터가 변경되었을 때, 동일한 컴포넌트는 재사용됩니다. 이런 동작 방식은 이전 컴포넌트를 삭제한 후 다시 렌더링 하는 것 보다 효욜적입니다. 컴포넌트가 재사용 되기 때문에, 컴포넌트의 라이프 사이클 훅은 호출되지 않습니다.

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

params이 변경 되었을 때, 어떠한 코드 동작을 해야 한다면 $route를 watch에 등록하거나,

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

위의 코드와 같이 vue-router의 beforeRouteUpdate 콜백 메소드를 사용하면 됩니다.

2. Catch all / 404 Not Found 라우팅

어떠한 url 문자열에도 라우터를 매칭시키고 싶다면 *를 사용할 수 있습니다.

{
  // will match everything
  path: '*'
}
{
  // will match anything starting with `/user-`
  path: '/user-*'
}

라우터 설정 마지막에 { path '*' }를 추가한다면 이 라우터는 404 페이지로 사용할 수 있습니다.

// Given a route { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'

// Given a route { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

/user-admin url은 user-* 라우터에 매칭됩니다. /non-existing url은 *라우터에 매칭됩니다. *을 이용해 매칭된 param 값은 this.$route.params.pathMatch에 저장됩니다.

3. 고급 매칭 패턴

vue-router은 라우트 매칭 앤진으로 path-to-regexp을 사용합니다. 더 자세한 라우팅 매칭을 사용하길 원한다면 위의 문서를 참고 바랍니다.

4. 매칭 우선순위

동일한 url이 여러 라우트와 매칭 되는 경우가 있을 수 있습니다. 이 경우에는 먼저 정의 된 라우트가 높은 우선 순위를 가집니다.

참고

• https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html