1. 關(guān)于vue路由切換總是默認(rèn)添加一個class router-link-exact-active

<router-link :to="'/'" tag="a" active-class="active" class="scrolly active">個人中心</router-link>

對應(yīng)生成的HTML代碼為：

<a data-v-69d72528="" href="#/" class="scrolly active router-link-exact-active active">個人中心</a>

2. Vue2路由動畫效果實(shí)現(xiàn)

參照vue官網(wǎng)的過渡劫持
動畫效果主要是由 css3 來實(shí)現(xiàn)的。
請參照例子

<template>  
  <div id="app">    
    <transition :name="transitionName">  
      <router-view class="child-view"></router-view>  
    </transition>    
  </div>  
</template>  
  
<script>  
  
export default {  
  name: 'app',  
  data () {  
    return {  
      transitionName: 'to'  
    }  
  },  
  mounted () {  
  },  
  //監(jiān)聽路由的路徑，可以通過不同的路徑去選擇不同的切換效果  
  watch: {  
    '$route' (to, from) {  
      if(to.path == '/'){  
        this.transitionName = 'to';  
      }else{  
        this.transitionName = 'from';  
      }  
    }  
  }  
}  
</script>  
  
<style>  
.child-view {  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  transition: all .5s cubic-bezier(.55,0,.1,1);  
}  
.from-enter, .to-leave-active {  
  opacity: 0;  
  -webkit-transform: translate(30px, 0);  
  transform: translate(30px, 0);  
}  
.from-leave-active, .to-enter {  
  opacity: 0;  
  -webkit-transform: translate(-30px, 0);  
  transform: translate(-30px, 0);  
}  
</style>