<router-view>
是基本的动态组件,所以我们可以用 <transition>
组件给它添加一些过渡效果:
- <transition>
- <router-view></router-view>
- </transition>
<transition>
的所有功能 在这里同样适用。
上面的用法会给所有路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用 <transition>
并设置不同的 name。
- 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'
- }
- }
查看完整例子 这里.