久しぶりの投稿です。開発した際に躓いたポイントの備忘のため
やりたかったこと
vue.jsにて作成したアプリ内のリンクから、別ウィンドウにて別サイトのURLを開きたい
ここではリンクを設置したルーターパスを/linkとします。
下記のようなリンクのイメージ
https://vuejsproduction.jp/#/link
aタグリンクをクリックしたら別サイトが別ドメインにて開かれるように設計
サンプルソース
いろいろ省略してますが悪しからず
test.vue
<template>
<div>
<p>こんにちは。<a hlef="#" v-on:click="openWindow">こちら</a>を押したら別ページに飛びます
</div>
</template>
<script>
methods: {
openWindow: function() {
const url = "https://google.com"
window.open(url, '_blank', 'width=1024,height=768,scrollbars=yes,resizable=yes')
}
}
</script>
何が起きたか
サブウィンドウは開かれました。が、
親ウィンドウのアドレスバーが何やら不穏な感じに
https://vuejsproduction.jp/#/
vue-routerで定義しているパスパラメータ部分がすっぽり抜け落ちてしまっていますね。
親ウィンドウ側のURLは変化してほしくなかったので下記のように修正
修正後サンプルソース
test.vue
<template>
<div>
<p>こんにちは。<a hlef="#" v-on:click.stop.prevent="openWindow">こちら</a>を押したら別ページに飛びます
</div>
</template>
<script>
methods: {
openWindow: function() {
const url = "https://google.com"
window.open(url, '_blank', 'width=1024,height=768,scrollbars=yes,resizable=yes')
}
}
</script>
v-on:clickに.stopと.preventをつけてあげたら大丈夫でした。
.stopでaタグイベントハンドラ自体の親要素への伝搬を止め、
.preventでaタグのイベントを通常通り処理すべきでないと指示している感じらしいです。