Vue Router 过渡动效

过渡动效

过渡动效

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

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

单个路由的过渡

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

基于路由的动态过渡

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

<div id="app">
  <transition :name="transitionName"></transition>
  <router-view></router-view>
</div>

export default {
  name: "Home",
  data() {
    return {
      transitionName: ''
    }
  },
  watch: {
    '$route'(to, from) {
      const toDepth = to.path.split('/').length;
      const fromDepth = from.path.split('/').length;
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
    }
  }
}

设置transition的name，监听当前路由，根据to，from获取当前路径以及目标路径的深度，若当前路径深度小于目标路径深度，则过渡效果应用slide-right，否则应用slide-left。