[Vue3] URL parameter

URL 파라미터를 활용하여 여러 개의 상세페이지를 하나의 컴포넌트로 처리하는 방법에 대해 알아봅니다. 네이버 블로그 등에서 볼 수 있는 “/어쩌구/글번호”와 같이 URL에 글 번호를 포함하여 해당 글의 내용을 동적으로 불러오는 방식을 구현해보겠습니다.

---

1️⃣ 문제 상황

만약 상세페이지를 위해 아래처럼 각각의 경로를 모두 따로 등록한다면, 글이 100만 개일 때 100만 개의 라우트가 필요하게 되어 유지보수와 관리가 어렵습니다.

// router.js (잘못된 예제)
const routes = [
  {
    path: '/detail/0',
    component: Detail,
  },
  {
    path: '/detail/1',
    component: Detail,
  },
  // ... 계속해서 작성해야 함.
];

---

2️⃣ 파라미터를 이용한 동적 라우팅

Vue Router에서는 :파라미터명 형식을 사용해 URL 파라미터를 정의할 수 있습니다. 이 경우, /detail/ 뒤에 어떤 값이 들어오더라도 해당 컴포넌트를 렌더링할 수 있습니다.

// router.js (올바른 예제)
const routes = [
  {
    path: '/detail/:id', // :id가 URL 파라미터 역할을 함.
    component: Detail,
  },
];

• 설명:
  • /detail/:id로 경로를 설정하면, /detail/0, /detail/1 등 /detail/ 뒤에 어떤 값이 들어가도 Detail.vue 컴포넌트를 보여줍니다.
  • 이렇게 하면 하나의 라우트 정의로 무한히 다양한 파라미터를 처리할 수 있어 효율적입니다.

---

3️⃣ 컴포넌트 내에서 URL 파라미터 사용하기

Detail 컴포넌트에서는 Vue 인스턴스의 $route.params 객체를 통해 URL에 입력된 파라미터 값을 가져올 수 있습니다. 이를 이용해 동적으로 데이터를 불러오거나 조건에 따라 다른 내용을 렌더링할 수 있습니다.

<!-- Detail.vue 예제 -->
<template>
  <div>
    <h1>게시글 번호: {{ $route.params.id }}</h1>
    <!-- 여기서 $route.params.id에 따라 다른 게시글 내용을 출력할 수 있음 -->
  </div>
</template>

<script>
export default {
  name: "Detail",
  // 필요한 경우 created나 mounted 훅에서 $route.params.id를 활용해 API 호출 등 추가 로직 구현 가능
};
</script>

• 설명:
  • 템플릿에서는 {{ $route.params.id }}를 사용하여 URL에 전달된 id 값을 바로 출력할 수 있습니다.
  • 예를 들어, 사용자가 /detail/1로 접속하면, 1이 $route.params.id에 할당되어 “게시글 번호: 1”이 화면에 출력됩니다.
  • 이를 기반으로 해당 번호에 맞는 게시글 데이터를 불러오는 등의 동적 처리를 할 수 있습니다.

---

📌 정리

• 문제점:
  • 정적 라우트 정의는 글의 개수가 많을 때 비효율적입니다.
• 해결 방법:
  • :파라미터명을 사용한 동적 라우팅으로 단 하나의 라우트 정의로 다양한 URL 파라미터를 처리합니다.
• 컴포넌트 내 활용:
  • $route.params를 사용하면 URL 파라미터에 접근해 동적 콘텐츠를 렌더링할 수 있습니다.
• 활용 예:
  • 게시판, 블로그, 상품 상세 페이지 등 URL 파라미터에 따라 내용을 다르게 보여줘야 하는 모든 경우에 유용하게 사용할 수 있습니다.