Question

看起来您可以使用to来扩展路由器链接。我想链接到首页。不起作用，换行会更改格式。如何在不更改格式的情况下创建<-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

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

<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;
}

Answer 3

我不确定您是否会对这个问题有任何反应，因为它至少涉及到 some 个自定义项。

如果您对其他解决方案不满意，请使用以下另一种解决方案：https://codepen.io/simondepelchin/pen/PooRyBG

我所做的是将v-toolbar-title替换为router-link，并手动添加了Vuetify添加的v-toolbar__title类。另外请注意，为了保持默认样式，您必须指定链接的标签，在这种情况下，标签应为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所使用的类，您可能也必须对其进行更改。

Vuetify <v-toolbar-title>和不会更改格式的链接

3 个答案: