v-tab中router-link仅点击文字生效，如何实现点击整个标签区域跳转

原代码中router-link仅覆盖了「Docs」文本的小范围区域，v-tab的其余空白区域没有绑定路由跳转事件，所以只有精确点击文本才会触发跳转。

方案1（优先推荐）：使用v-tab原生路由属性 #

Vuetify的v-tab组件原生兼容vue-router的所有路由属性，不需要额外嵌套router-link，直接给v-tab绑定to属性即可，点击整个标签区域都会触发路由跳转，同时会自动同步路由激活状态和标签选中状态：

<v-tab 
  class="normalize font-weight-bold"
  to="/docs"
>
  Docs
</v-tab>

该方案写法更简洁，无需自定义样式，也不会出现路由激活状态和标签选中状态不匹配的问题。

方案2：保留router-link，设置其撑满父容器 #

如果有特殊业务场景必须保留router-link嵌套的写法，可以给router-link添加样式让它完全铺满v-tab的可点击区域：

<v-tab>            
  <router-link
    class="normalize font-weight-bold"
    style="width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center;"
    to="/docs"
  >
    Docs
  </router-link>
</v-tab>

你也可以把行内样式提取到全局样式表中对应类名下，避免代码冗余。

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