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