Vue3でAタグをクリックした時に遷移させないで自前の処理をする

  • このエントリーをはてなブックマークに追加

Vue3にて、例えば、AタグをButton代わりに使う場合、こんな感じで書きたいわけですが、HashベースのRouterを使っている場合、#で遷移が発生してしまいます。

<a href="#" @click="linkClick" class="btn btn-outline-primary">link</a>

なのでこう書きます。

<a href="#" @click.prevent.stop="linkClick" class="btn btn-outline-primary">link</a>

stopでclickイベントの伝播が止まり、preventで既定のアクションを処理しない。
例えばformのsubmitをさせない場合はpreventを指定する(<form @submit.prevent="mySubmit">)

参考