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

【问题标题】：Vue router link class binding active classVue路由器链接类绑定活动类
【发布时间】：2020-12-23 08:42:20
【问题描述】：

我有一个项目，我尝试呈现一个包含指向不同页面的链接的侧边栏。但是这些侧边栏项目在它们处于活动状态时需要采用不同的样式。但我不知道如何获取包含此值的布尔值。在示例中，我有应该确定路由器链接是否处于活动状态的代码应该是我写的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>

【问题讨论】：

标签： vue.js vue-router

【解决方案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"
      >

【讨论】：