Vue2中a标签右键新标签页打开未触发@click方法如何解决

浏览器的右键「在新标签页打开」「新窗口打开」等导航行为，本质是直接读取元素href属性发起跳转，默认不会触发当前页面绑定的点击事件，可根据你的业务场景选择以下方案解决：

方案1：移除href属性（最推荐） #

如果该元素不需要原生链接的跳转能力，直接去掉href属性，浏览器就不会识别为可跳转链接，右键菜单也不会出现跳转相关选项，从根源避免跳转问题。可以通过CSS模拟a标签的样式保证交互一致：

<template>
  <a 
    class="faux-link"
    @click="someMethod"
  >
    点击触发逻辑
  </a>
</template>

<style>
.faux-link {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}
.faux-link:hover {
  color: #40a9ff;
}
.faux-link:active {
  color: #096dd9;
}
</style>

方案2：保留a标签语义，阻止右键默认行为 #

如果需要保留a标签的语义特性，可阻止右键菜单的默认行为，避免用户触发原生跳转选项，也可以自定义右键菜单适配业务需求：

<template>
  <a 
    href="#"
    @click.prevent="someMethod"
    <!-- 阻止默认右键菜单，可选择直接触发方法或者自定义右键菜单 -->
    @contextmenu.prevent="someMethod"
  >
    点击触发逻辑
  </a>
</template>

方案3：适配新标签页打开场景 #

如果业务确实需要支持新标签页打开同时执行对应逻辑，可以将href设置为实际的业务路由地址，把someMethod的逻辑封装为公共方法，在目标页面的初始化钩子中调用该公共方法即可：

<!-- 原页面 -->
<a 
  :href="`/target-page?param=${id}`"
  @click.prevent="someMethod"
>
  点击触发逻辑
</a>

<!-- 目标页面 -->
<script>
import { commonMethod } from '@/utils/common'
export default {
  mounted() {
    const param = this.$route.query.param
    commonMethod(param)
  }
}
</script>

内容的提问来源于stack exchange，提问作者99Coder