激活v-btn作为路由器链接时的样式

Question

当v-btn在vuetify中作为router-link激活时，如何设置样式？

<div class="mx-n4">
  <v-btn text height="80" class="white--text btn-links" to="/" exact>HOME</v-btn>
  <v-btn text height="80" class="white--text btn-links" to="/events" exact>EVENTS</v-btn>
  <v-btn text height="80" class="white--text btn-links" to="/login" exact>SPEAKERS</v-btn>
  <v-btn text height="80" class="white--text btn-links" to="/location" exact>LOCATION</v-btn>
</div>

这是我的VueRouter实例

const router = new VueRouter({
  linkActiveClass: "active",
  linkExactActiveClass: "active",
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

Answer 1

默认情况下为v-btn--active：

.v-btn--active {
    background-color: red;
}

或者您可以在按钮上设置active-class属性：

<v-btn text class="white--text btn-links" active-class="active" to="/events" exact>
   EVENTS
</v-btn>

https://codeply.com/p/ny44Thdceo