라우트 컴포넌트에 Props 전달하기

컴포넌트에서 $route 또는 useRoute()를 사용하면 라우트와 강하게 결합되므로, 특정 URL에서만 사용할 수 있게 되어 컴포넌트의 유연성이 제한됩니다. 이것이 반드시 나쁜 것은 아니지만, props 옵션을 사용해 이 동작을 분리할 수 있습니다.

이전 예제로 돌아가 봅시다:

vue

<template>
  <div>User {{ $route.params.id }}</div>
</template>

with:

import User from './User.vue'

// 이것들은 `createRouter`에 전달됩니다
const routes = [{ path: '/users/:id', component: User }]

대신 prop을 선언하면 User.vue에서 $route에 대한 직접적인 의존성을 제거할 수 있습니다:

Composition APIOptions API

vue

<!-- User.vue -->
<script setup>
defineProps({
  id: String,
})
</script>

<template>
  <div>User {{ id }}</div>
</template>

vue

<!-- User.vue -->
<script>
export default {
  props: {
    id: String,
  },
}
</script>

<template>
  <div>User {{ id }}</div>
</template>

그 다음 props: true를 설정해 라우트가 id param을 prop으로 전달하도록 구성할 수 있습니다:

const routes = [{ path: '/user/:id', component: User, props: true }]

이렇게 하면 컴포넌트를 어디서나 사용할 수 있어, 컴포넌트를 더 쉽게 재사용하고 테스트할 수 있습니다.

Boolean 모드

props를 true로 설정하면 route.params가 컴포넌트 props로 설정됩니다.

이름 있는 뷰를 가진 라우트에서는 각 이름 있는 뷰마다 props 옵션을 정의해야 합니다:

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false },
  },
]

props가 객체이면 그 값이 그대로 컴포넌트 props로 설정됩니다. props가 정적인 경우에 유용합니다.

const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false },
  },
]

props를 반환하는 함수를 만들 수 있습니다. 이를 통해 매개변수를 다른 타입으로 캐스팅하거나, 정적 값과 라우트 기반 값을 결합하는 등의 작업을 할 수 있습니다.

const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q }),
  },
]

URL /search?q=vue는 SearchUser 컴포넌트에 {query: 'vue'}를 props로 전달합니다.

props 함수는 라우트 변경 시에만 평가되므로 가능하면 상태를 가지지 않게 유지하세요. props를 정의하는 데 상태가 필요하다면 래퍼 컴포넌트를 사용하면 Vue가 상태 변경에 반응할 수 있습니다.

<RouterView> 슬롯을 통해 props를 전달할 수도 있습니다:

template

<RouterView v-slot="{ Component }">
  <component
    :is="Component"
    view-prop="value"
   />
</RouterView>

WARNING

이 경우 모든 view 컴포넌트 가 view-prop을 받게 됩니다. 이는 모든 view 컴포넌트가 view-prop prop을 선언했다고 가정하게 되므로 보통 좋은 생각이 아닙니다. 가능하다면 위의 다른 옵션 중 하나를 사용하세요.