Vuetify v-btn 路由活动类问题

Question

我正在使用 Vue 和 Vuetify 编写一个 CRUD 应用程序。我有一些使用“to”属性定义为 v-btns 的链接。我注意到单击按钮时，活动按钮通常会发生变化，以便突出显示与用户当前位置对应的按钮。但是，我有两条如下所示的路线：

“/歌曲/新”
“/歌曲”

v-btn 具有以下“to”属性：

到：“/songs/new”
到：“/歌曲”

但是，当单击指向“/songs/new”的按钮时，vuetify 会将两个按钮都设置为活动状态。知道为什么会这样吗？

Answer 1

你需要使用exact属性。

<v-btn to="/songs/new" exact>Songs</v-btn>
<v-btn to="/songs" exact>New Song</v-btn>

现在，只有在您完全处于路线中时，该按钮才会激活类。

您还可以利用 exact-active-class 来使用自定义活动类。