[vue-router] 트랜지션

<route-view>는 사실 동적인 컴포넌트이기 때문에 <transition> 컴포넌트를 사용하는 것과 동일한 방식으로 트랜지션 효과를 적용 할 수 있습니다.

<transition>
  <router-view></router-view>
</transition>

1. 라우트 별 트랜지션

위의 코드와 같이 작성하게 되면 모든 라우트에 동일한 트랜지션을 적용하게 됩니다. 각 라우트 컴포넌트가 서로 다른 트랜지션을 갖도록 하기 위해서는, 각각의 라우트 컴포넌트 내에서 다른 이름으로 <transition>을 사용하면 됩니다.

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

2. 라우트 기반 동적 트랜지션

이동할 라우트와 현재 라우트 간의 관계를 기반으로 동적으로 트랜지션을 결정할 수 있는 방법도 있습니다.

<!-- 동적 트랜지션을 위한 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'
  }
}