所需更改文件 App.vue

template結構：

<template>
<div id="app">
<div id="nav">
<router-link to="/come">Come</router-link>
</div>
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>

script結構：

<script>

export default {
name: ‘app‘,
data () {
return {
transitionName: ‘slide-left‘
}
},
mounted () {
},
//監聽路由的路徑，可以通過不同的路徑去選擇不同的切換效果
watch: {
‘$route‘ (to, from) {
if(to.path == ‘/‘){
this.transitionName = ‘slide-right‘;
}else{
this.transitionName = ‘slide-left‘;
}
if(to.path == ‘/come‘){
this.transitionName = ‘slide-right‘;
}else{
this.transitionName = ‘slide-left‘;
}
}
}
}
</script>

style結構：

<style>

.child-view {
margin: 300px auto;
width: 100%;
height: 100%;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}

</style>

vue-router transition 路由切換效果