v-btn router-link only activated when clicked on text

Question

I have a button like this

    <v-btn
      class="overline text-capitalize"
      color="grey darken-4"
      plain
    >
      <router-link 
      style="text-decoration: none; color: inherit;"
      :to="{ name: 'default', params: { locale: $route.params.locale }}">About</router-link>
    </v-btn>

My question is, The link works only when clicked exactly on the text 'About' but not working when clicked on the area around the text . I want to be able to switch to a different page when clicked on the button area for a better UX. How should I edit the code? Thanks.

Answer 1

I had the same problem. After some searching I found out that v-btn has its own router-link wrapped in it. Use the to-directive of the v-btn to link.

Try :

<v-btn
  class="overline text-capitalize text-decoration-none"
  color="grey darken-4"
  plain
:to="{ name: 'default', params:{ locale: $route.params.locale }}"
>
 About
</v-btn>

This worked for me.