How to assign a class to an element depending on the state of the vue application?

Question

Animation

In general, I have a root App component in which page components (Home, About, etc.) are rendered through router-view. This root component has elements on the left and right, which essentially display which page (component) I am currently on. Those. when you go to "About us" the right second bar is given a height of 60px instead of 30, and so on. I have been looking for a long time and looking for explanations for the teapot, how can I get information about which component is inserted in the router view in order to perform actions with the right strip depending on it. How to get and shove this information into the vuex store and use it further to animate every little thing? If index is active, then the 1st bar lights up, if about, then the 1st bar fades out and the 2nd bar starts to glow. I apologize in advance for the wild wording, but if I could accurately formulate the essence of my problem,

Answer 1

https://ru.vuejs.org/v2/guide/class-and-style.html
In simple cases router can be redundant and simple switching of components via is is fine: https://ru.vuejs.org/v2/guide/ components.html#%D0%...

Answer 2

If you understand the essence of the question correctly, you need to react to changes in vue-roater
This documentation page will help you: https://router.vuejs.org/en/advanced/navigation-gu...

Answer 3

Method one: place the code you need in the router hooks inside the components themselves:
Documentation
Second method: the same thing, but in the route hooks itself:
Documentation