Vuetify v-btn路由活动类问题

Question

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

  

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

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

  

至：“ /歌曲/新”
  到：“ /歌曲”

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