过渡

观看 Vue School 上的免费视频课程

为了在路由组件上使用过渡并为导航设置动画，您需要使用 <RouterView> 插槽

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

所有过渡 API 在这里的工作方式相同。

每路由过渡

以上用法将对所有路由应用相同的过渡。如果您希望每个路由的组件具有不同的过渡，您可以将 元字段 和 <transition> 上的动态 name 组合起来

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]

<router-view v-slot="{ Component, route }">
  <!-- Use a custom transition or fallback to `fade` -->
  <transition :name="route.meta.transition || 'fade'">
    <component :is="Component" />
  </transition>
</router-view>

基于路由的动态过渡

也可以根据目标路由和当前路由之间的关系动态确定要使用的过渡。使用与之前非常相似的代码段

<!-- use a dynamic transition name -->
<router-view v-slot="{ Component, route }">
  <transition :name="route.meta.transition">
    <component :is="Component" />
  </transition>
</router-view>

我们可以添加一个 导航后钩子，根据路由的深度动态地将信息添加到 meta 字段中

router.afterEach((to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})

强制在重复使用的视图之间进行过渡

Vue 可能会自动重复使用看起来相似的组件，从而避免任何过渡。幸运的是，可以 添加 key 属性 来强制进行过渡。这也允许您在保持相同路由但使用不同的参数时触发过渡

<router-view v-slot="{ Component, route }">
  <transition name="fade">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>