<router-view>
는 본질적으로 동적인 컴포넌트이디.
때문에 <transition>
컴포넌트를 사용하는 것과 같은 방식으로 트랜지션 효과를 적용할 수 있다.
(<transition>이 기억이 잘 나지 않는다면 Vue Transitions 확인)
<transition>
<router-view></router-view>
</transition>
각 라우트의 컴포넌트가 서로 다른 트랜지션을 갖도록 하려면
각 라우트 컴포넌트 내에서 다른 이름으로 <transition>
을 사용할 수 있다.
const Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
}
const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}
대상 라우트와 현재 라우트 간의 관계를 기반으로 동적으로 사용할 트랜지션을 결정할 수도 있다.
<!-- 동적 트랜지션을 위한 name 지정 -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
// 그런 다음 부모 구성 요소에서 `$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'
}
}