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/