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

Question

我正在使用 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>

Answer 1

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

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

Answer 2

您可以添加精确为道具，如：

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

Answer 3

您可以通过简单地将其包装在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>

Answer 4

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

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

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

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

Answer 5

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

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

Answer 6

这是我解决它的方法。 我遵循了 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>

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

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