In this piece of code, I have a v-card, which redirects user to another page. I wanted to put a button into the v-card to do something different:

<NuxtLink :to="`books/1`" style="text-decoration: none;">
  <v-card hover width="400px">
    <v-card-text>
      <span>
        Book 1
      </span>

      <!-- button that does something different -->
      <v-btn icon @click="addToFavourites(1)">
        <v-icon>
          mdi-star-outline
        </v-icon>
      </v-btn>
    </v-card-text>
  </v-card>
</NuxtLink>

addToFavourites(id) {
  console.log("add book " + id + " to favourites");
}

Now whenever I click on the button it redirects me to another page, but addToFavourites does not redirect user to another page. How do I prevent redirecting user to another page when clicking on the button?