Vuetify <v-toolbar-title> 和不改变格式的链接答案

【问题标题】：Vuetify <v-toolbar-title> and links that do not change formatingVuetify <v-toolbar-title> 和不改变格式的链接
【发布时间】：2019-10-21 12:27:23
【问题描述】：

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

【问题讨论】：

你能分享一下组件代码吗，这对解决你的问题很有帮助..
Codepen 中的@chans：
codepen.io/jasonbunnell/pen/GRRmrPE
感谢 codepen，只需创建一个示例 vuetify 项目并使用您的代码重现 UI，请检查以下答案。让我知道这是否能解决您的问题
我把完整的项目放在GitHub上：

标签： vue.js vuetify.js

【解决方案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 按钮组件事件处理程序

【讨论】：

你在项目中使用 vue-router 吗？？
是的。 router.js 不是路由器目录中的 index.js。

【解决方案2】：

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

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

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

这里是sn-p的代码：

<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 的类，您可能也必须更改它。

【讨论】：

【解决方案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;
}

【讨论】：

那么，@chans 的回答应该可以解决你的问题。

【解决方案4】：

这是一个使用 v-btn 和plain 的简化版本。类到中心标题是可选的。

   <v-toolbar-title class="flex text-center">
    <v-btn plain to="/">Title</v-btn>
   </v-toolbar-title>

【讨论】：