如何使用路由器运行 Vuetify.js 工具栏标题答案

【问题标题】：How to run Vuetify.js toolbar title with router如何使用路由器运行 Vuetify.js 工具栏标题
【发布时间】：2018-08-09 13:09:07
【问题描述】：

我正在使用 vuetify.js。我想应用程序标题链接到顶部菜单。但是在 /route shop 和 /discount 中，HogeHoge 按钮更改了切换状态。有没有办法收集这个？

<v-toolbar app>
  <v-toolbar-title class="mr-5">
    <v-btn flat to="/">HogeHoge</v-btn>
  </v-toolbar-title>
  <v-toolbar-items class="hidden-sm-and-down">
    <v-btn flat to="/shop">shop</v-btn>
    <v-btn flat to="/discount">discount</v-btn>
  </v-toolbar-items>
</v-toolbar>

【问题讨论】：

标签： javascript vue.js toolbar vuetify.js

【解决方案1】：

这是我解决它的方法。我遵循了 vuetify 和 vue-router 官方文档的混合。

<v-toolbar-title style="cursor: pointer">
    <router-link v-slot="{navigate}" :to="{ name:'Home' }" custom>
      <span role="link" @click="navigate" @keypress.enter="navigate">
        Home
      </span>
    </router-link>
  </v-toolbar-title>

在这个答案中强调一些事情很重要：

的 tag 属性已弃用，并已在 Vue Router 4 中删除。使用 v-slot API 删除此警告：https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link
使用 span 而不是 nothing 可以消除格式问题。
这也会从 vue-router 中删除关于 NavigationDuplicated 的警告。

【讨论】：

【解决方案2】：

只需编辑 v-toolbar-title 标记以包含以下内容：

<v-toolbar-title style="cursor: pointer" @click="$router.push('/')" >

【讨论】：

简单，就是这样。谢谢！
完美！这让我不必重写链接样式

【解决方案3】：

<router-link to="/home" tag="div" class="v-toolbar__title">Home</router-link>

你可以用任何元素来做到这一点。只需要知道应该使用哪个 vuetify 类名。
如果你不知道它是什么类名，首先尝试实现普通元素，这将是一个路由器链接。

<v-toolbar-title>Title</v-toolbar-title>

打开您的开发工具浏览器并复制类名（以及标签）。
现在您可以使用路由器链接来解决问题了。

【讨论】：

【解决方案4】：

您可以通过简单地将其包装在 router-link 中来做到这一点。

<v-toolbar app clipped-left>
    <router-link to="/page1">
      <v-toolbar-title>
        ? Title
      </v-toolbar-title>
   </router-link>
</v-toolbar>

在Nuxt js 你可以这样做：

<nuxt-link to="/page1">
    <v-toolbar-title>
        ? Title
    </v-toolbar-title>
</nuxt-link>

【讨论】：

【解决方案5】：

我可以自己解决这个问题。对根路由进行活动类记录。

https://github.com/vuetifyjs/vuetify/issues/1947

【讨论】：

【解决方案6】：

您可以添加 exact 作为道具，如：

<v-btn flat to="/shop" exact>shop</v-btn>
<v-btn flat to="/discount" exact>discount</v-btn>

【讨论】：