【Vue.js】Vue.jsでaタグにhrefを設定した際に、画面遷移せずに他の処理を実行する方法【prevent.stop】
もともとvue-routerで実装していたが、aタグで設置して欲しいという要望がきました。
(SEOとか、右クリックで別タブで開きたいとか)
aタグにして画面遷移すると画面に必要な情報が全て再取得されてしまうので、SPAのメリットがなくなってしまいました。
ということで、aタグのhrefにurlを設定するものの、画面遷移はすることなく、javascriptで他の処理を動かす方法を調べました。
prevent.stopを使う
結論から言えば、「prevent.stop」を使います。
対応前
See the Pen oabGoJ by duotaro (@duotaro100) on CodePen.
<a href="https://codepen.io" @click="doClick()">codepen</a> <p>{{isClick}}</p>
この実装だと、isClickの値が更新されるされないに関わらず、別画面に遷移してしまいます。
対応後
See the Pen qJbPOY by duotaro (@duotaro100) on CodePen.
<a href="https://codepen.io" @click.prevent.stop="doClick()">codepen</a> <p>{{isClick}}</p>
こちらの対応では、画面遷移することなくvueでの処理を進めることができます。
以上です。
