过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API：

  1. <router-view v-slot="{ Component }">
  2.   <transition name="fade">
  3.     <component :is="Component" />
  4.   </transition>
  5. </router-view>

Transition 的所有功能 在这里同样适用。

单个路由的过渡

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在<transition> 上：

  1. const routes = [
  2.   {
  3.     path: '/custom-transition',
  4.     component: PanelLeft,
  5.     meta: { transition: 'slide-left' },
  6.   },
  7.   {
  8.     path: '/other-transition',
  9.     component: PanelRight,
  10.     meta: { transition: 'slide-right' },
  11.   },
  12. ]
  1. <router-view v-slot="{ Component, route }">
  2.   <!-- 使用任何自定义过渡和回退到 `fade` -->
  3.   <transition :name="route.meta.transition || 'fade'">
  4.     <component :is="Component" />
  5.   </transition>
  6. </router-view>

基于路由的动态过渡

也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：

  1. <!-- 使用动态过渡名称 -->
  2. <router-view v-slot="{ Component, route }">
  3.   <transition :name="route.meta.transition">
  4.     <component :is="Component" />
  5.   </transition>
  6. </router-view>

我们可以添加一个 after navigation hook，根据路径的深度动态添加信息到 meta 字段。

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