禁用 q-item 上的突出显示（Quasar Framework）答案

【问题标题】：Disable highlight on q-item (Quasar Framework)禁用 q-item 上的突出显示（Quasar Framework）
【发布时间】：2021-11-27 21:02:35
【问题描述】：

当当前 url 等于 :to="something" 属性时，q-item 以蓝色突出显示。

但我希望 q-item 保持黑色而不以蓝色突出显示，即使当前 url 等于 :to="something" 属性。

这是我的 q-item 代码（我使用 Quasar v2.0.4）：

<q-item
  :to="{ name: 'home' }"
>
  <q-item-section avatar>
    <q-icon name="home" size="md" />
  </q-item-section>
  <q-item-section> 
    Home
  </q-item-section>
</q-item>

是否可以禁用 q-item 上的高亮显示？

【问题讨论】：

标签： javascript vue.js vuejs2 vuejs3 quasar-framework

【解决方案1】：

您可以使用 active-class="remove-active"：

<q-item
  active-class="remove-active" // Here
  :to="{ name: 'home' }"
>
  <q-item-section avatar>
    <q-icon name="home" size="md" />
  </q-item-section>
  <q-item-section> 
    Home
  </q-item-section>
</q-item>

【讨论】：

【解决方案2】：

您可以使用 active-class="q-item-no-link-highlighting" 使 q-item 保持黑色不活动：

<q-item
  active-class="q-item-no-link-highlighting" // Here
  :to="{ name: 'home' }"
>
  <q-item-section avatar>
    <q-icon name="home" size="md" />
  </q-item-section>
  <q-item-section> 
    Home
  </q-item-section>
</q-item>

【讨论】：