[Vuejs]-Selected Tab highlighted until the user not clicked to the another tab in vuejs

by

0👍

This next example works even if you have children in your routes.

I’m using your categories as an example. What you need to do is to check when the route changes and what route is active. For example, if you use this.$routes.name or this.$routes.path you have access to the current route name and the current route path. All you need to do is to verify if the current route matches the nav tab.

so your HTML should look like this (you just need to use the same logic to the others)

     <div :class="$route.path.includes('/categories') ? 'nav-highlight active' : 'nav-highlight'">
        <router-link to="/categories">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/products.jpeg" alt="product icon" /></div>
            <div class="s-small f-size">Products</div>
          </div>
        </router-link>
      </div>

Your css:

    .nav-highlight{
      width: 25%;
    }
    .nav-highligth.active {
      background-color: rgb(194, 193, 193);
    }

Leave a comment