Vue Router过渡动效

<router-view> 是基本的动态组件，因此咱们能够用 <transition> 组件给它添加一些过渡效果：

<transition>
  <router-view></router-view>
</transition>

上面的用法会给全部路由设置同样的过渡效果，若是你想让每一个路由组件有各自的过渡效果，能够在各路由组件内使用 <transition> 并设置不一样的 name。

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

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

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

// 接着在父组件内
// watch $route 决定使用哪一种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

详细参看Vue Router https://router.vuejs.org/zh/