Question

我有一个项目，我尝试渲染包含指向不同页面的链接的侧边栏。但是这些侧边栏项目在活动时需要采用不同的样式。但我不知道如何获得一个包含这个值的布尔值。在示例中，我的代码应该确定路由器链接是否处于活动状态应该是我写的地方 true

  <div class="mt-7">
      <router-link
        v-for="item in menuItems"
        :key="item.title"
        class="flex items-center pl-0 cursor-pointer hover:bg-blue-700 h-14"
        :class="{ 'bg-blue-300': true }"
        :to="item.link"
      >
        <div v-if="true" class="h-full w-1 bg-blue-700"></div>
        <img
          v-bind:src="require(`@/assets/img/sidebar/${item.icon}`)"
          v-bind:alt="item.icon"
          class="mr-3 w-4"
        />
        <p>{{ item.title }}</p>
      </router-link>
    </div>

Answer 1

您可以将您的类添加到 router-link 组件的 active-class 属性：

      <router-link
        v-for="item in menuItems"
        :key="item.title"
        class="flex items-center pl-0 cursor-pointer hover:bg-blue-700 h-14"
        active-class= "bg-blue-300"
        :to="item.link"
      >

Vue路由器链接类绑定活动类

1 个答案: