Quasar Framework中如何禁用q-item路由匹配时的高亮效果

可以实现，以下是适配Quasar v2的3种常用解决方案：

• 方案1：单组件局部禁用（最常用）
  直接给q-item添加active-class和exact-active-class属性，赋值为空字符串，即可阻止组件添加激活高亮的样式类：

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

• 方案2：全局禁用所有q-item的路由高亮
  如果需要项目内所有带路由跳转的q-item都不触发高亮，可以在Quasar全局注册时配置默认属性：

// 入口文件main.js示例
import { createApp } from 'vue'
import { Quasar } from 'quasar'
import App from './App.vue'

const app = createApp(App)
app.use(Quasar, {
  components: {
    QItem: {
      activeClass: '',
      exactActiveClass: ''
    }
  }
})
app.mount('#app')

• 方案3：自定义CSS样式覆盖
  如果需要保留路由激活类的逻辑，仅取消高亮样式，可以自定义样式覆盖默认规则：

<!-- 给q-item添加自定义类 -->
<q-item
  :to="{ name: 'home' }"
  class="no-active-highlight"
>
  <!-- 内部内容省略 -->
</q-item>

/* 全局样式文件中添加规则 */
.no-active-highlight.q-item--active,
.no-active-highlight.q-item--exact-active {
  color: inherit !important;
  background: transparent !important;
  /* 可自行补充其他需要覆盖的高亮样式属性 */
}

内容的提问来源于stack exchange，提问作者Super Kai - Kazuya Ito