Vue-Router 过度/切换动效

过渡动效

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

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

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>
  `
}

基于路由的动态过渡 

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