验证<v-toolbar-title>和不改变格式的链接</v-toolbar-title>

Question

看起来您可以使用 to in 以便路由器链接扩展。 我想链接到首页。 不起作用，并且换行会更改格式。 如何在不更改格式的情况下制作 <-v-toolbar-title> 链接？ 谢谢！

Answer 1

有一个完美的方法来处理这种情况。

使用点击事件处理程序导航到首页

只需将您的 v-toolbar-title 代码替换为以下代码即可。

<v-toolbar-title @click="$router.push('/')" class="headline text-uppercase" >
  <span class="display-1 text-uppercase font-weight-medium">Company&nbsp;</span>
  <span class="display-1 text-uppercase font-weight-light">Associates</span>
</v-toolbar-title>

这种方式非常干净，无需添加任何外部 css 或其他按钮组件，只需将此“$router.push('/')”添加到 @click 事件处理程序

Answer 2

我不确定您是否会对对此问题的任何回应感到满意，因为它至少会涉及一些定制。

如果您对其他解决方案不满意，这里还有一个： https://codepen.io/simondepelchin/pen/PooRyBG

我所做的是将v-toolbar-title替换为router-link并手动添加由 Vuetify 添加的v-toolbar__title class。 另请注意，为了保持默认样式，您必须指定链接的标签，在这种情况下应该是div 。

这是代码片段：

<router-link 
    tag="div"
    :to="{ path: '/' }" 
    class="v-toolbar__title headline text-uppercase">
    <span class="display-1 text-uppercase font-weight-medium">Company&nbsp;</span>
    <span class="display-1 text-uppercase font-weight-light">Associates</span>
</router-link>

请注意，如果 Vuetify 更新和更改用于v-toolbar-title的 class，您可能也必须更改它。

Answer 3

下面是一个快速修复。 据我所知，没有开箱即用的解决方案。

<v-toolbar-title>
    <v-btn text to="/">home</v-btn>
</v-toolbar-title>

.theme--light.v-btn--active:hover::before,
.theme--light.v-btn--active::before {
  opacity: 0;
}

.theme--dark.v-btn--active:hover::before,
.theme--dark.v-btn--active::before {
  opacity: 0;
}