在 vue-router 中访问导航栈
vue
提供了 <transition>
组件来为组件的切换添加动画,得益于这个特性, vue-router
中的 router-view
也可以在切换路由组件时播放动画。自然的,就产生了在前进/后退时使用不同动画的需求。在 vue-router
文档的 Route-Based Dynamic Transition 一节中,提供了这样的写法:
// then, in the parent component,
// watch the `$route` to determine the transition to use
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
根据路径中 /
的个数来判断路由的深度,然后以此决定播放的动画。但事情并不总是那么简单。