过渡动效
<router-view> 是基本的动态组件, 所以我们可以用 <transition> 组件给他添加一些过渡效果
1
2
3
| <transition>
<router-view></router-view>
</transition>
|
单个路由的过渡
上面的用法会给所有的路由设置一样的过渡效果, 如果想让每个路由组件有各自的过渡效果, 可以在各路由组件内使用 <transition> 并设置不同的 name
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const Foo = {
template: `
<transition>
<div class="foo"> ... <div>
</transition>
`
}
const Bar = {
template: `
<transition>
<div class="bar"> ... </div>
</transition>
`
}
|
基于路由的动态过渡
还可以基于当前路由与目标路由的变化关系, 动态设置过渡效果
1
2
3
4
| <transition :name="transitionNmae">
<router-view>
</router-view>
</transition>
|
1
2
3
4
5
6
7
| wathc: {
"$route"(to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
|
