千編一律のルーティング切替動効を回避する方法の1つは、ルーティング情報オブジェクト$routeを傍受し、ルーティング切替情報に基づいて遷移効果を動的に選択することである.
まず、transitionコンポーネントのnameをVueインスタンスのモデルプロパティにバインドして、この名前を動的に変更します.nameによって、異なるダイナミックスタイルクラス名が対応し、異なる遷移ダイナミックが実現されることを知っています.
たとえば、次のテンプレートは、Vueインスタンスのname属性に遷移効果コンポーネントのeffect属性をバインドします.

<transition :name="effect">
  <router-view>router-view>
transition>

次に、経路情報オブジェクト$routeの変更を傍受する.$routeは現在のアクティブなルーティングを反映しています.これはVueRouterがVueインスタンスに追加した応答属性です.したがって、Vueインスタンスを作成するときにwatchの構成項目を使用してリスナーを宣言したり、$watch()の方法で変更を監視したりすることができます.

vm.$watch('$route',function(nv,ov){...})

$routeの新しい値(nv-new value)は現在のルーティング情報オブジェクトを表し、古い値(ov-old value)は前回のルーティング情報オブジェクトを表すので、パス切り替えの違いに応じてインスタンスのeffect属性を変更することができる.
たとえば、次のコードは、現在のアクティブパスに基づいて、Vueインスタンスのeffectプロパティを設定します.

vm.$watch('$route',function(to,from){
  const effectMap = {
    '/': 'home',
    '/blogs':'blog',
    '/about':'about'
  }
  this.effect =  effectMap(to.path)
})

サードパーティ製ライブラリの使用
サードパーティ製アクティブライブラリ、例えばAnimateを使用する場合.cssは、enter-active-classシリーズのスタイルクラス属性を、Vueインスタンスの応答式属性にバインドしなければならない.
たとえば、次のテンプレートの遷移効果コンポーネントのenter-active-class属性は、Vueインスタンスのeffect属性にバインドされます.

class="effect">
  <router-view>router-view>
transition>
//..........................................................  ...................................................................
//html  





  
  



  

    
    
      
    
  
    
  
  
  
  




//js  


 const EzHome = {template:'
HOME
'}
const EzBlogs = {template:'
BLOGS
'}
const EzAbout = {template:'
ABOUT
'}

const router = new VueRouter({
  routes:[
    {path:'/',component:EzHome},
    {path:'/blogs',component:EzBlogs},
    {path:'/about',component:EzAbout}
  ]
})

new Vue({
  el:'#app',
  router,
  data:{
    effects: ['zoomIn','slideInDown','bounceIn','flipInX','rotateIn','rollIn','lightSpeedIn','fadeIn'],
    effect :''
  },
  watch:{
    '$route'(to,from){
      const effectMap = {
          "/":"fadeIn",
        "/blogs":"rotateIn",
        "/about":"zoomIn"
      }
      this.effect = ['animated', effectMap[to.path]].join(' ')
    }
  }
})