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路由動畫效果實現(xiàn)
參照vue官網(wǎng)的過渡劫持
動畫效果主要是由 css3 來實現(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>
