How in Vue to get the page number on which I am and run animations depending on this?

Question

Vue.js

I've already asked a similar question, but it's wrong. Here's the gist: I have a vue app with vue-router. there are 4 components ( Home, About ...). When clicking on vue-router links in the root vue instance, active components are drawn (If you clicked on About, then the About component was drawn, and any functions were worked out to animate any element in the root vue instance). So: how do I bind this component and information, which component from vue-router is currently active? And how to get this information? As an example, a simple pagination on this site on the right in the form of stripes. https://www.ankoku-toshi-jutsu.com/#home

Answer 1

Set transition's name parameter value depending on the current route:

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

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

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