v-btn包裹router-link仅点击文字触发路由 按钮其余区域点击无效如何解决

你当前的写法将行内元素<router-link>嵌套在<v-btn>内部，<router-link>的可点击范围仅由内部的「About」文本撑开，按钮内文字周边的空白区域属于<v-btn>本身，没有绑定路由跳转逻辑，因此只有精准点击文字才会触发跳转。

Vuetify 的<v-btn>组件原生支持 vue-router 的跳转配置，不需要额外嵌套<router-link>，直接将路由参数绑定到按钮的to属性上即可，此时整个按钮的可点击区域都会触发跳转，代码更简洁也不存在样式冲突：

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

这种写法下组件会自动处理路由跳转逻辑，默认就没有链接下划线、文字颜色继承按钮样式，不需要额外写内联样式覆盖。

如果业务要求必须在按钮内部嵌套<router-link>，只需要给<router-link>加样式让它撑满整个按钮的内容区域即可：

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

优先推荐使用第一种方案，是Vuetify官方文档明确给出的路由按钮用法，兼容性和可维护性更好。

内容的提问来源于stack exchange，提问作者Perry