1. 동적 라우트

express로 라우터 개발 시에 router 경로로 '/user/:id'와 같이 파라미터 값을 넘겨주어 라우팅했던 경험이 있는데 vue-router에서도 비슷한 방식으로 동적 라우팅이 가능하다.

1) Param

라우터 path에 작성하는 동적 세그먼트를 param이라고 하며, 파라미터는 콜론:으로 시작한다.
라우트가 일치하는 컴포넌트에서는 파라미터를 this.$route.params로 접근할 수 있기 때문에 컴포넌트의 템플릿에 $routes.params.id 를 작성하여 현재 사용자 id를 표시할 수 있다.

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

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

동일한 라우트에서는 여러 개의 동적 세그먼트를 가질 수 있다.

/user/:username/post/:post_id
path 예시) /user/evan/post/123
$route.params : {username: 'evan', post_id: '123'}

2) params 변경 사항에 반응하기

동적 세그먼트를 사용할 때 주의할 점은 동적 세그먼트가 변경되더라도 동일한 컴포넌트 인스턴스가 재사용된다는 점이다. /user/foo, user/bar 모두 동일한 컴포넌트를 렌더링하며 컴포넌트 라이프 사이클 훅이 호출되지 않음. 그렇기 때문에 파라미터가 변경됨에 따라 반응하려면 $route 객체를 watch하면 된다.(혹은 beforeRouteUpdate 메소드 사용)

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

beforeRouteUpdate

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

3) 그 외

• vue-router는 선택적 동적 세그먼트, 커스텀 정규식 패턴과 같은 다양한 고급 매칭 패턴을 지원함.
  예시) https://next.router.vuejs.org/guide/essentials/route-matching-syntax.html(v4.x)
  https://github.com/vuejs/vue-router/blob/dev/examples/route-matching/app.js(v3.x)
• 매칭 우선순위 : 라우트 정의와 순서에 따라 결정됨. 먼저 정의된 경로가 우선순위 더 높음.

2. 중첩 라우트 - children 옵션

여러 단계로 중첩된 라우트도 vue-router의 children 옵션으로 구현할 수 있다
예시)
/user/david/profile
/user/david/posts

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        { path: '', component: UserHome },
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

/로 시작하는 중첩된 라우트는 루트 경로로 취급되어 children 옵션의 path에서 전체 경로를 작성하지 않는다.

참고 - Vue Router 공식 문서
https://next.router.vuejs.org/guide/