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

Question

我需要突出显示当前选项卡，直到用户无法单击下一个选项卡。 Hover 只能帮助突出显示选项卡，但是一旦选择了 hover 选项卡的任何其他内容，就会消失。

例如，我单击类别选项卡，它会突出显示，但一旦选择类别内的任何产品，然后 hover 被删除
谁能帮我怎么做？

<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.$routes.name或this.$routes.path $routes.path 您可以访问当前路由名称和当前路由路径。 您需要做的就是验证当前路线是否与导航选项卡匹配。

所以你的 HTML 应该是这样的（你只需要使用与其他人相同的逻辑）

     <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>

您的 css：

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