带有导航栏路由器链接的 vuetify 按钮

Question

我正在一个网站上工作，我想将 v-btn 的样式设置为活动链接，我得到了它有点工作，但按钮的背景没有正确更改，只有一个突出显示应用于文字

<v-btn active-class="active" router-link to="/"><v-card></v-card>
      <router-link to="/">Home</router-link>
</v-btn>
.v-btn .router-link-exact-active{
  color: #333333;
  background-color: #888888;
  font-size: xx-large;
  
}

Answer 1

您可以采取一些不同的措施来使这个问题更容易处理：

1. 你可以在

   v-btn

   中使用

   router-link

   ，如下所示：

   <router-link to="/profile">
    <v-btn class="mx-4 white--text" elevation="2" x-large rounded color="deep-purple darken-1" to="/profile">
          Profile
    </v-btn>
   </router-link> 
   
   .router-link-exact-active .v-btn {
    color: #333333;
    background-color: #888888;
    font-size: xx-large;
    }
   

2. 你可以像这样使用

   router-link

   tag attribute

   ：

       <router-link to="/feed" tag="v-btn">
        <v-btn class="mx-4 white--text" elevation="2" x-large rounded color="deep-purple darken-1">
          Feed
        </v-btn>
      </router-link>
   

3. 您可以将

   v-btn

   与

   to

   道具一起使用，如下所示：

      <v-btn class="mx-4 white--text" elevation="2" x-large rounded color="deep-purple darken-1" to="/feed">
        Feed
      </v-btn>