vue-router - 在 vuetify.js 中，将路由器路径指定为属性()使按钮看起来像是处于 "hover"状态

Question

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

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

代码

<!-- 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这解释了 Prop 。