是基本的动态组件，所以我们可以用 组件给它添加一些过渡效果：
<transition>
<router-view></router-view>
</transition>
下面是我测试的一个父路由组件
<template>
<div>
我是父路由组件，还有两个子路由组件
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return {transitionName: 'slide-left'}
},
// watch: {
// '$route' (to, from) {
// console.log(to)
// console.log(from)
// }
// }
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
},
beforeRouteUpdate (to, from, next) {
console.log(to)
console.log(from)
console.log(next)
next()
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.fade-enter-active, .fade-leave-active
transition: opacity .5s ease
.fade-enter, .fade-leave-active
opacity: 0
.child-view
position: absolute
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>
路由实例：
...
,
{
path: '/foo',
component: Foo,
children: [
{
path: '',
component: Default
},
{
path: 'posts',
component: posts
},
{
path: 'profile',
component: profile,
beforeEnter: requireAuth
}
]
},
....
当我们从父路由url进入到子路由url.或者从一个子路由到另一个子路由，都会产生动画效果。