🚦 Vue Router – 동적 라우트 매칭과 파라미터 처리

🚦 Vue Router – 동적 라우트 매칭과 파라미터 처리

Vue 라우터 시리즈 > 4️⃣ Vue Router > 2️⃣ 동적 라우트 매칭과 파라미터 처리

• 1. 동적 라우트란?
• 2. 동적 라우트 정의 방법
• 3. 파라미터 접근 방법
• 4. 라우트 변경 감지(watch 활용)
• 5. 선택적 파라미터
• 6. props 방식으로 컴포넌트에 전달하기
• 7. 실전 팁 및 주의사항
• 🔚 다음 글 안내

---

1. 동적 라우트란?

Vue Router에서 경로 일부를 변수처럼 처리할 수 있는 기능입니다. 예: /user/123, /product/42

// /user/:id 형태로 작성
{ path: '/user/:id', component: UserDetail }

이렇게 작성하면 /user/1, /user/2처럼 :id가 바뀌는 모든 URL을 처리할 수 있습니다.

2. 동적 라우트 정의 방법

// router/index.js
{
  path: '/user/:id',
  name: 'UserDetail',
  component: UserDetail
}

• :id는 동적 파라미터입니다.
• 하위 경로도 가능: /user/:userId/post/:postId

3. 파라미터 접근 방법

동적 파라미터는 해당 컴포넌트 내에서 this.$route.params로 접근할 수 있습니다.

// UserDetail.vue
export default {
  mounted() {
    console.log(this.$route.params.id); // 출력: '123'
  }
}

4. 라우트 변경 감지 (watch 활용)

같은 컴포넌트를 재사용하면서 파라미터만 바뀔 경우, watch로 감지해야 갱신됩니다.

watch: {
  '$route.params.id'(newId) {
    this.fetchUser(newId); // 새로운 ID로 데이터 재요청
  }
}

왜 필요할까?
라우터는 컴포넌트를 재사용하므로, /user/1 → /user/2처럼 URL만 바뀌면 mounted()는 다시 실행되지 않기 때문입니다.

5. 선택적 파라미터

Vue Router v4부터는 "선택적 파라미터"도 가능합니다.

{ path: '/search/:keyword?', component: SearchPage }

예:

• /search → keyword 없음
• /search/vue → keyword: 'vue'

6. props 방식으로 컴포넌트에 전달하기

컴포넌트에서 $route를 직접 사용하지 않고, props로 전달받는 방식이 더 깔끔합니다.

// router/index.js
{
  path: '/user/:id',
  component: UserDetail,
  props: true // 👈 중요
}

// UserDetail.vue
props: ['id'],
mounted() {
  console.log(this.id); // 직접 props로 받음
}

7. 실전 팁 및 주의사항

• 동적 파라미터는 URL 디코딩을 신경 써야 함 (예: 공백, 한글)
• 하위 라우트의 파라미터는 전파되지 않음 → 명시적으로 넘겨야 함
• optional parameter 사용 시 path 순서 주의 (정적 라우트보다 아래에 위치)
• props: true를 쓰면 컴포넌트 재사용성이 높아짐

🔚 다음 글 안내

이제 URL 파라미터를 자유자재로 활용할 수 있게 되었습니다.
다음 글에서는 네비게이션 가드와 인증 처리에 대해 다룹니다.

👉 다음 글: Vue Router - 네비게이션 가드와 인증 처리