如何突出显示 Vuetify 菜单中的选定项目？

Posted 2023-02-22

【中文标题】如何突出显示 Vuetify 菜单中的选定项目？

【英文标题】：How to highlight selected item in the Vuetify menu?

【发布时间】：2019-02-06 22:52:14

【问题描述】：

我在侧边栏中有一个菜单（使用 vue-router）：

<v-list>
    <v-list-tile
        value="true"
        v-for="(item, i) in menu"
        :key="i"
        :to="item.path"
    >
        item.name
    </v-list-tile>
</v-list>

它工作得很好，但是我在Vuetify 文档中没有看到任何关于突出显示所选菜单项的内容。任何帮助表示赞赏！

更新：原来我不是很聪明。设置value="true" 属性可确保所有元素始终处于活动状态，移除导致正常功能的元素。呵呵！

【问题讨论】：

我把问题留在这里，以防其他人在代码中遇到类似的情况，如果你投反对票，至少有礼貌地解释原因

类似问题***.com/questions/47586022/…

【参考方案1】：

默认情况下，Vuetify 将通过匹配当前路由来突出显示活动的链接元素。

CodeSandbox 示例。

但是，如果需要，您可以控制此行为，如 v-list-tile 和 active-class 属性的 API 文档中所示。您可以使用类似于以下内容的方式手动将当前路由与列表项匹配：

<v-list-tile 
    v-for="(item, i) in menu"
    :key="i"
    :to="item.path" 
    active-class="highlighted"
    :class="item.path === $route.path ? 'highlighted' : ''"
>
    item.name
</v-list-tile>

另请参阅 Vue Router 文档中的 linkActiveClass。

【讨论】：

由于某种原因，当我添加此代码时，菜单中的所有项目都设置为突出显示

您应该确保$route.path 对于每个下一个链接都是唯一的。

这个方法可以用来在当前$route.path的基础上扩展一个v-list-group吗？我试过这个:value="$route.path === '/welcome' ? 'true' : 'false'"，但即使路径发生变化，也会保持组扩展。谢谢@DigitalDrifter