在vuetify.js中，将路由器路径指定为属性（ ）使按钮看起来像处于“悬停”状态

Question

我正在尝试添加路由器链接到按钮。

在下面的代码中，您可以看到我使用了两种不同的方法：

码

<!-- Button 1 -->
<v-btn flat to='/'>home</v-btn>

<!-- Button 2 -->
<router-link to='/' tag='span' style='cursor:pointer;'>
  <v-btn flat>home</v-btn>
</router-link>

结果

第一个（使用to =“”属性）永久看起来像处于悬停状态（当你悬停按钮时颜色相同）

题

有办法解决吗？我喜欢第一种方法，它更简单，但为什么它看起来不对？

我应该使用第一种方法，还是第二种方法更好？

Answer 1

取决于你想要的（但我认为你不希望在任何路线上突出显示按钮），指定active-class为空。

<v-btn flat to='/' active-class>home</v-btn>

或者，对于家庭路线，您可能想要使用exact，因此按钮不会在每个页面上突出显示，但仅限于/。

<v-btn flat to='/' exact>home</v-btn>

Here更多地讲述它为什么会发生，vuetify buttons api解释道具。