Как во Vue получать номер страницы, на которой нахожусь и запускать в зависимости от этого анимации?

Question

[ERomulon]

Уже задавал подобный вопрос, но неправильно. Вот суть: есть vue приложение с vue-router. есть 4 компоненты ( Home, About ...). При клике по ссылкам vue-router в корневом экземпляре vue отрисовываются активные компоненты (Если кликал по About, то отрисовалась компонента About, и отработали какие-либо функции для анимирования какого-либо элемента в корневом экземпляре vue). Так вот: как мне связать этот компонент и информацию, какой компонент из vue-router сейчас активен? И как получить эту информацию? Как пример простая пагинация на этом сайте справа в виде полосок. https://www.ankoku-toshi-jutsu.com/#home

Answer 1

[0xD34F]

Устанавливайте transition'у значение параметра name в зависимости от текущего маршрута:

computed: {
  routeAnimation() {
    return что-то, зависящее от this.$route;
  },
},

<transition :name="routeAnimation">
  <div :key="routeAnimation"></div>
</transition>

https://jsfiddle.net/wac86yo0/1/