0Pricing
Vue Academy · 강의

중첩 라우트와 동적 라우트

중첩 레이아웃과 동적 라우트 매개변수를 구성합니다.

중첩 라우트와 동적 라우트은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

정적 route를 넘어서

실제 app에는 데이터를 전달하고 레이아웃 안에 중첩되는 route가 필요합니다.

  • 동적 세그먼트는 식별자와 같은 값을 캡처합니다
  • 중첩 route는 부모 내부에 자식 route를 렌더링합니다
  • 이름 있는 route와 프로그래밍 방식의 탐색으로 유연성을 높일 수 있습니다

동적 route 세그먼트

콜론은 모든 값과 일치하는 동적 세그먼트를 정의합니다.

const routes = [
  { path: "/user/:id", component: UserProfile }
]

// Matches /user/1, /user/42, /user/abc

route.params에 접근하기

캡처한 값은 route.params를 통해 읽을 수 있습니다.

<script setup>
import { useRoute } from "vue-router"

const route = useRoute()
console.log(route.params.id)
</script>

매개변수 변경에 대응하기

매개변수만 변경되면(예: /user/1에서 /user/2로 변경되는 경우) 컴포넌트가 재사용됩니다. 데이터를 다시 불러오려면 매개변수를 감시하세요.

import { watch } from "vue"
import { useRoute } from "vue-router"

const route = useRoute()
watch(() => route.params.id, (newId) => {
  loadUser(newId)
})

여러 동적 세그먼트

route에는 여러 동적 부분이 포함될 수 있습니다.

const routes = [
  { path: "/user/:userId/post/:postId", component: Post }
]

// route.params.userId and route.params.postId

중첩 route

중첩 route를 사용하면 자식 route를 부모 컴포넌트 내부에서 렌더링할 수 있습니다.

const routes = [
  {
    path: "/user/:id",
    component: UserLayout,
    children: [
      { path: "profile", component: Profile },
      { path: "posts", component: Posts }
    ]
  }
]

중첩 라우터 뷰

부모 컴포넌트에는 자식이 렌더링될 자체 라우터 뷰가 필요합니다.

<!-- UserLayout.vue -->
<template>
  <h1>User</h1>
  <router-view></router-view>
</template>

<!-- /user/1/profile renders Profile here -->

이름 있는 route

경로를 직접 작성하지 않고 참조하려면 route에 이름을 지정하세요.

const routes = [
  {
    path: "/user/:id",
    name: "user",
    component: UserProfile
  }
]

이름으로 연결하기

라우터 링크는 이름 있는 route를 대상으로 지정하고 매개변수를 객체로 전달할 수 있습니다.

<router-link
  :to="{ name: 'user', params: { id: 42 } }"
>
  View User
</router-link>

프로그래밍 방식의 탐색

router의 push 메서드를 사용하면 JavaScript에서 탐색할 수 있습니다.

import { useRouter } from "vue-router"

const router = useRouter()

function goToUser(id) {
  router.push({ name: "user", params: { id } })
}

기타 탐색 메서드

router는 다음과 같은 탐색 도우미를 추가로 제공합니다.

  • router.push: 새로운 기록 항목을 추가합니다
  • router.replace: 새로운 기록 항목을 추가하지 않고 탐색합니다
  • router.back: 이전 페이지로 이동합니다

빠른 확인

동적 route와 중첩 route에 대해 이해한 내용을 확인해 보세요.

다시 보기: 중첩 route와 동적 route

고급 라우팅을 배웠습니다.

  • 동적 세그먼트는 route.params에 캡처됩니다
  • 중첩 route는 children과 중첩된 라우터 뷰를 통해 구성합니다
  • 이름 있는 route를 사용하면 이름으로 연결할 수 있습니다
  • router.push로 프로그래밍 방식의 탐색을 수행합니다

다음 주제는 탐색 가드입니다.

자주 묻는 질문

“중첩 라우트와 동적 라우트” 강의는 무료인가요?

네 — “중첩 라우트와 동적 라우트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“중첩 라우트와 동적 라우트”에서 뭘 배우나요?

중첩 레이아웃과 동적 라우트 매개변수를 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“중첩 라우트와 동적 라우트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Vue Router 설정
  2. 중첩 라우트와 동적 라우트
  3. 내비게이션 가드
← Vue Academy(으)로 돌아가기