How to add a css class to an element according to the page accessed in Vue.js

Question

Good morning Gentlemen. I’m having a little difficulty with Vue.js, I want to understand how to put the class "active" in an element li according to the current active route.

I have a menu that is generated dynamically through a Loop on vue.js and would like to know how I can apply the class active according to the currently active link to the element li correct that is being rendered.

Ex:

<li v-for="rota in rotas" class="active">
      <router-link :to="rota.path">
           <i :class="rota.icone"></i>
           <p>{{ rota.titulo }}</p>
      </router-link>
 </li>

I want the attribute class="active" is applied only to the menu corresponding to the route that is active in the browser.

Answer 1

This technique works when we make the static menu. In my case, I generated a dynamic menu, according to the routes I have in my file rotas.js he’s responsible for declaring routes in my system, so I import him into a main component (App.vue) and within this file I pass the routes as property for the module sidebar.Vue, that is, the menu is based on the number of existing routes, in your example the menu is static so your example applied perfectly, already in a dynamic way I could not pass the property in this way in the html attribute, once this is in a loop v-for.

Anyway, I got a solution for this. Here’s how I did it. In the documentation of Vue.js they teach to pass an object to the property class and then on this object the property active responsible for implementing the class active to my HTML widget checks if the attribute value isActive is true (true) and from there apply or not, once I understood this, I decided to turn the attribute into a function and pass to it the value of the attribute rota.path which is running at the moment the loop is made. One mistake that had occurred at this time, is that when rota.path received the initial route value '', it did not apply any class to the element, because the value is "empty". So I did a ternary check and if the value was empty or '' the parameter passed to isActive would be /, causing the function to return true and the Home Page link worked the same as the others.

Man HTML Stayed like this:

<li v-for="rota in rotas" :class="{ active: isActive(rota.path ? rota.path : '/') }">
    <router-link :to="rota.path ? rota.path : '/'">
        <i :class="rota.icone"></i>
        <p>{{ rota.titulo }}</p>
    </router-link>
 </li>

and my code Javascript was like this:

<script>
 props:['rotas'],
    data(){
        return{
            isActive: function(path){
                if(this.$route.path == path){
                    return true;
                }
            }
        }
    }
</script>

This way it is active in all links that have routes and also in HOME which in this case is an empty route.

In the case of property rotas is because I get your data from another component. My file of routes (js routes.) is basically like:

import Home from './modulos/pages/Home.vue';
import Conta from './modulos/pages/Conta.vue';
import Perfil from './modulos/pages/Perfil.vue';


export const routes = [
    {path:'', component: Home, titulo: 'Home', icone: 'pe-7s-graph' },
    {path:'/conta', component: Conta, titulo: 'Conta', icone: 'pe-7s-user'},
    {path:'/perfil', component: Perfil, titulo: 'Perfil', icone: 'pe-7s-user'}
];

Answer 2

<router-link tag="li" to="route-here">
  <a>meu botão</a>
</router-link>

It will generate a li containing the with the link inside. if the internal a is active, the outside li receives the class .active.

Answer 3

It is worth starting by saying that the Router already does it for the <router-link>. If the route is the same as router-link, he already adds the class active automatively.

In case you really need it to be applied to <li>, one possibility is you use a method comparing the route with a parameter. Look at this link has a functional example of this.