过渡动效

观看 Vue School 的如何创建路由过渡动效的免费视频课程 (英文)

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

  1. <transition>
  2.   <router-view></router-view>
  3. </transition>

Transition 的所有功能过渡动效 - 图1 在这里同样适用。

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。

  1. const Foo = {
  2.   template: `
  3.     <transition name="slide">
  4.       <div class="foo">...</div>
  5.     </transition>
  6.   `
  7. }
  9. const Bar = {
  10.   template: `
  11.     <transition name="fade">
  12.       <div class="bar">...</div>
  13.     </transition>
  14.   `
  15. }

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

  1. <!-- 使用动态的 transition name -->
  2. <transition :name="transitionName">
  3.   <router-view></router-view>
  4. </transition>
  1. // 接着在父组件内
  2. // watch $route 决定使用哪种过渡
  3. watch: {
  4.   '$route' (to, from) {
  5.     const toDepth = to.path.split('/').length
  6.     const fromDepth = from.path.split('/').length
  7.     this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  8.   }
  9. }

查看完整例子请移步这里过渡动效 - 图2。