Переходы

Поскольку <router-view> по сути является динамическим компонентом, мы можем применить эффекты перехода к нему так же, используя компонент <transition>:

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

Все API переходов работают здесь одинаково.

Переход на основе маршрута

Вышеприведенное использование применит один и тот же переход для всех маршрутов. Если вы хотите, чтобы у каждого компонента маршрута были разные переходы, вы можете вместо этого использовать <transition> с разными именами внутри каждого компонента маршрута:

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

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

Динамический переход, основанный на маршруте

Также возможно определить используемый переход динамически, основываясь на взаимосвязи целевого маршрута и текущего маршрута:

<!-- use a dynamic transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</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'
  }
}

Полный пример см. здесь.