vue一些语法

1. 关于vue路由切换总是默认添加一个class router-link-exact-active

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

对应生成的HTML代码为：

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

2. Vue2路由动画效果实现

参照vue官网的过渡劫持
动画效果主要是由 css3 来实现的。
请参照例子

<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 () {  
  },  
  //监听路由的路径，可以通过不同的路径去选择不同的切换效果  
  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>