import Vue from 'vue';
import Router from 'vue-router';
import index from '@/pages/index';
import feedback from '@/pages/feedback';
import version from '@/pages/version';Vue.use(Router);export default new Router({routes: [{path: '/',name: 'index',meta: {index: 0},component: index}, {path: '/feedback',name: 'feedback',meta: {index: 1},component: feedback}, {path: '/version',name: 'version',meta: {index: 1},component: version}]
});

<template><div id="app"><transition :name="transitionName"><router-view/></transition></div>
</template><script>
export default {name: 'App',data() {return {transitionName: ''};},watch: { // 使用watch 监听$router的变化$route(to, from) {// 如果to索引大于from索引,判断为前进状态,反之则为后退状态if (to.meta.index > from.meta.index) {// 设置动画名称this.transitionName = 'slide-left';} else {this.transitionName = 'slide-right';}}}
};
</script><style lang="stylus">
@import url('./assets/css/reset');
#appheight 100%min-height 29rembackground #f3f4f6.slide-right-enter-active,
.slide-left-enter-active{will-change: transform;transition: all 500ms;
}
.slide-left-leave-active,
.slide-right-leave-active{will-change: transform;transition: all 1ms;
}
.slide-right-enter {opacity: 0;transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {opacity: 0;transform: translate3d(100%, 0, 0);
}
.slide-left-enter {opacity: 0;transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {opacity: 0;transform: translate3d(-100%, 0, 0);
}
</style>

<transition name="likeAddAnimate"><div class="like_add" v-show="addShow">+1</div>
</transition>

// 样式