Vue-router 트랜지션

Transition

<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'
  }
}