Vue @click在存在href属性的锚标签上无法工作

Question

编辑：我忘记澄清了，我想知道如何编写一个带有 href 属性的锚点标签，但是当单击该元素时，应忽略 href 并执行单击处理程序。

我目前在使用 Vue 1，我的代码如下：

<div v-if="!hasPage(category.code)">
  <div>
    <template v-for="subcategoryList in subcategoryLists[$index]" >
      <ul>
        <li v-for="subcategory in subcategoryList"v-on:click.stop="test()">
          <a :href="subcategory.url">{{subcategory.label}}</a>
        </li>
      </ul>
    </template>
  </div>
</div>

我尝试的是向用户展示一些代表我的网站类别的按钮，其中一些按钮将引导用户到另一个页面，而其他按钮则会切换下拉菜单以显示子类别列表，当单击这些子类别时，您将被带到子类别的页面。但这些按钮需要通过Google Tag Manager进行跟踪，因此我使用了@click属性来调用函数并忽略href属性。但是这样不起作用，我尝试过@click.prevent、@click.stop、@click.stop.prevent等，但都没有成功。问题在于，如果我删除href属性，则@click方法可以很好地工作，但SEO要求每个链接都有href属性。感激不尽，谢谢！

- RichyST

---

如果您将点击事件放在锚点标签上会怎样？ - Dan Oswalt

你能区分那些指向另一页的按钮和那些切换下拉列表的按钮吗？ - Boussadjra Brahim

@boussadjrabrahim 我省略了第一个按钮，因为代码有点长，而且与此不同。我应该指定我展示的代码仅负责子类别按钮部分，在我的想法中，这应该很简单，因为这些都是简单的锚标签，需要一个有效的URL作为href，但当被点击时应该触发一个函数而不是导航。 - RichyST

@DanOswalt 在这种情况下什么也不会发生，我尝试了不同的点击处理程序位置，但除非我删除 href，否则没有任何地方能够工作。 - RichyST

所以，请给我一个分类和子类的虚拟例子。 - Boussadjra Brahim

Answer 1

如评论中所指明的那样，您必须在与 href 相同的元素上添加点击事件。您之前尝试时未成功的原因很可能是您使用了 @click.stop，它只停止传播，而不是默认操作（重定向到链接）。您想要的是防止浏览器将用户重定向：@click.prevent

new Vue({
  el: '#app',
  data: {
    subcategoryList: Array(10).fill({
        url: 'http://google.com',
        label: 'http://google.com'
    })
  },
  methods: {
    test(event) {
      event.target.style.color = "salmon"
    }
  }
})
Vue.config.devtools = false
Vue.config.productionTip = false

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<main id="app">
<template>
  <ul>
    <li v-for="subcategory in subcategoryList">
      <a :href="subcategory.url" v-on:click.prevent="test($event)">{{subcategory.label}}</a>
    </li>
 </ul>
</template>
</main>

- Sølve T.