如何使用路由器運行 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的警告。