选定的选项卡突出显示，直到用户未单击 vuejs 中的另一个选项卡

Question

I need to highlight the current tab until user can not clicked to the next tab. Hover can only help to highlight the tab but once chooses the any other things hover tab gone.

For example i clicked to the categories tab, it will highlighted but once chooses any product inside the categories then hover removed
Can anyone help me how to do that?

<template>
  <div>
    <div class="navbar w-100 is-white is-fixed-bottom bottom-navbar is-hidden-desktop is-mobile">
      <div class="nav-highlight">
        <router-link to="/">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/home.jpeg" alt="home icon" /></div>
            <div class="s-small f-size">Home</div>
          </div>
        </router-link>
      </div>

      <div class="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>

      <div class="nav-highlight">
        <router-link to="/wish-list">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/wishlist.jpeg" alt="wishlist icon" /></div>
            <div class="s-small f-size">Wislist</div>
          </div>
        </router-link>
      </div>

      <div class="nav-highlight">
        <router-link to="/redeem-point">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/redeem.jpeg" alt="redeem icon" /></div>
            <div class="s-small f-size">Redeem Points</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterNavBar',
  components: {},
};
</script>

<style scoped>
.bottom-navbar {
  display: flex;
  width: 100%;
  background: white;
  justify-content: space-evenly;
}
.nav-highlight{
  width: 25%;
}
 .nav-highlight :hover {
    background-color: rgb(194, 193, 193);
} 
.image-resize {
  width: 180px;
  height: 26px;
}
}
</style>

Answer 1

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);
    }