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

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