vue.js - Vuetify v-btn 路由主动类问题

Question

我正在使用 Vue 和 Vuetify 编写一个 CRUD 应用程序。我使用“to”属性将一些链接定义为 v-btns。我注意到单击按钮时，事件按钮通常会更改，以便突出显示与用户当前位置相对应的按钮。但是，我有两条看起来像这样的路线:

"/songs/new"
"/songs"

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

to:"/songs/new"
to:"/songs"

但是，当单击指向“/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 来使用自定义事件类。