RouterView slot

The RouterView component exposes a slot that can be used to render the route component:

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

The code above is equivalent to using <router-view /> without the slot, but the slot provides extra flexibility when we want to work with other features.

KeepAlive & Transition

When working with the KeepAlive component, we would usually want it to keep the route components alive, not the RouterView itself. We can achieve that by putting the KeepAlive inside the slot:

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

Similarly, the slot allows us to use a Transition component to transition between route components:

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

We can also use KeepAlive inside a Transition:

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

For more information about using RouterView with the Transition component, see the Transitions guide.

Passing props and slots

We can use the slot to pass props or slots to the route component:

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

In practice, this usually isn't something you would want to do, as the route components would all need to use the same props and slots. See Passing Props to Route Components for other ways to pass props.

Template refs

Using the slot allows us to put a template ref directly on the route component:

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

If we put the ref on the <router-view> instead then the ref would be populated with the RouterView instance, rather than the route component.