0Pricing
Vue Academy · Lesson

Route Transitions and Animation

RouterView with Transition, transition-name based on route, slide/fade between routes.

Animating Between Routes

When the URL changes, the matched component swaps instantly. By wrapping the view in Vue's Transition, you can fade or slide between pages for a smoother feel.

RouterView With v-slot

To animate, you need access to the resolved component. The scoped slot form of RouterView exposes Component and route.

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

All lessons in this course

  1. Route Meta Fields and Typing
  2. Route Transitions and Animation
  3. Scroll Behavior Configuration
  4. Programmatic Navigation and useRouter
← Back to Vue Academy