用了很多动效，介绍4个很优秀的 Veu 路由过渡动效

Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。 它让我们可以在应用程序的不同页面之间添加平滑的动画/过渡效果。

如果使用得当，它可以让我们的应用程序更加现代和专业，从而增强用户体验。

在今天的文章中，我们介绍使用Vue Router过渡的基础知识，然后再介绍一些基本示例，希望能给大家一些启发和灵感。

下面我们要创建的四个过渡页面。

将 Vue 路由过渡添加到项目中

通常，Vue路由器设置如下所示

// default template
<template>
  <router-view />
</template>

在旧版本的Vue Router中，我们可以简单地用<transition>组件包装<router-view>。

然而，在Vue Router的新版本中，我们必须使用v-slot来解构我们的 props ，并将它们传递到我们的内部插槽。这个slow包含一个被transition包围的动态组件。

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

每个 Route 都有不同的过渡

默认情况下，用<transition>包装<component>将在我们使用的每条路由上添加相同的过渡。

有两种不同的方法可以为每个路由定制转场。

将过 transition 移到各个组件部分

首先，我们可以将<transition>移到每个单独的组件中，而不是用<transition>组件来包装我们的动态组件。 如下：

// app.vue
<template>
  <transition>
    <d