web-dev-qa-db-ja.com

ルーターでVuetify.jsツールバータイトルを実行する方法

私は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>
javascriptvue.jstoolbarvuetify.js
7
user2850652

これは、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>
3
Dmitry Kaltovich

次のように、properとしてexactを追加できます。

<v-btn flat to="/shop" exact>shop</v-btn>
<v-btn flat to="/discount" exact>discount</v-btn>
2
pirmax
<router-link to="/home" tag="div" class="v-toolbar__title">Home</router-link>

そして、あなたはそれをあらゆる要素で行うことができます。使用するVuetifyクラス名を知る必要があるだけです。
クラス名がわからない場合は、最初に通常の要素であるルーターリンクを実装してみてください。

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

開発ツールのブラウザーを開き、クラス名（およびタグも）をコピーします。 enter image description here
これで、ルーターリンクを使用してトリックを実行できます。

1
Adik

私はこれを自分で解決できました。ルートルートに注意してアクティブクラスを行う。

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

0
user2850652

V-toolbar-titleタグを編集して、以下を含めるだけです。

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