Активный класс привязки класса ссылки маршрутизатора Vue

У меня есть проект, в котором я пытаюсь отобразить боковую панель, содержащую ссылки на разные страницы. Но эти элементы боковой панели должны иметь другой стиль, когда они активны. Но я не знаю, как получить логическое значение, содержащее это значение. В примере у меня есть код, который должен определить, активна ли ссылка на роутер, должен быть там, где я написал 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>