template:
<transition>
<router-view></router-view>
</transition>
单个路由的过渡
const Foo = { template: ` <transition name="slide"> <div class="foo">...</div> </transition> ` } const Bar = { template: ` <transition name="fade"> <div class="bar">...</div> </transition> ` }
基于路由的动态过渡
<!-- 使用动态的 transition name --> <transition :name="transitionName"> <router-view></router-view> </transition>
// 接着在父组件内 // watch $route 决定使用哪种过渡 watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } }