<router-link> Vue Router @ clickイベント

Dec 06 2020

でクリックイベントを使用してみました<router-link>。動作しますが、リンクがクリックされるたびにページがリロードされます。避けたいのですが、どうしたらいいのかわかりません。

<router-link>単純な@clickイベントを受け入れないことを認識しています。いくつかのフォーラムで@ click.Iネイティブが機能することを確認しましたが、ご存知のとおり、これは非推奨です。

したがって、ルーターリンクをdivにラップし、リスナーをそのdivに配置する以外に、解決策があるかどうかを知りたいと思います。

これを実行したい理由は、リンクがクリックされたときにクラスを動的にバインドしたいからです。onClickでトリガーされるドロップダウンメニューを作成しました。しかし、そのドロップダウンメニュー内のリンクをたどると、メニューは開いたままになります。したがって、クラス(表示:なし)をドロップダウンメニューに動的にバインドするための追加の@clickイベントが必要です。ドロップダウン内の項目が繰り返されてVuexMutationにパラメーターが送信されるため、通常のタグを使用できず、ルーターリンクをspanまたはdivでラップしても目的の効果が得られません。

ありがとうございました !

よろしく、

T。

回答

1 GurkanUgurlu Dec 06 2020 at 06:32

あなたの質問を理解しているなら、vue-router(router-link)に「active-class」プロパティがあります。アクティブなルートに基づいて、クラスを動的に設定できます。

Slaveworx Dec 09 2020 at 00:43

divラッパーを使用してCSSを変更することで問題を解決できました(コードが正しく機能しませんでした)

 <div class="dropdown">
        <a class="dropbtn" @click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
        <div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
          <div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" @click="dropClick">
            <router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
            </router-link>
          </div>
        </div>
      </div>