RouterView 슬롯

RouterView 컴포넌트는 라우트 컴포넌트를 렌더링하는 데 사용할 수 있는 슬롯을 노출합니다:

<router-view v-slot="{ Component }">
  <component :is="Component" />
</router-view>

위 코드는 슬롯 없이 <router-view />를 사용하는 것과 같지만, 다른 기능과 함께 사용하려면 슬롯이 추가적인 유연성을 제공합니다.

KeepAlive 및 Transition

KeepAlive 컴포넌트를 사용할 때는 보통 RouterView 자체가 아니라 라우트 컴포넌트를 살아 있게 유지하고 싶습니다. 이는 KeepAlive를 슬롯 안에 두어 구현할 수 있습니다:

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

마찬가지로 슬롯을 사용하면 Transition 컴포넌트를 사용해 라우트 컴포넌트 사이에 전환 효과를 적용할 수 있습니다:

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

Transition 안에 KeepAlive를 넣어 사용할 수도 있습니다:

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

RouterView와 Transition 컴포넌트를 함께 사용하는 자세한 방법은 Transitions 가이드를 참고하세요.

props와 슬롯 전달하기

슬롯을 사용해 라우트 컴포넌트에 props나 슬롯을 전달할 수 있습니다:

<router-view v-slot="{ Component }">
  <component :is="Component" some-prop="a value">
    <p>Some slotted content</p>
  </component>
</router-view>

실제로는 라우트 컴포넌트가 모두 같은 props와 슬롯을 사용해야 하므로 이런 방식을 원하지 않는 경우가 많습니다. props를 전달하는 다른 방법은 라우트 컴포넌트에 Props 전달하기를 참고하세요.

템플릿 ref

슬롯을 사용하면 template ref를 라우트 컴포넌트에 직접 둘 수 있습니다:

<router-view v-slot="{ Component }">
  <component :is="Component" ref="mainContent" />
</router-view>

대신 ref를 <router-view>에 두면, ref에는 라우트 컴포넌트가 아니라 RouterView 인스턴스가 채워집니다.