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 标签管理器跟踪，这就是为什么我使用 @click 属性来调用函数并忽略 href 属性的原因。这不起作用，我尝试过@click.prevent、@click.stop、@click.stop.prevent，但这些都不起作用。

问题是，如果我删除 href 属性，@click 方法效果很好，但 SEO 要求是在每个链接上都有 href 属性。

任何帮助，将不胜感激。

Answer 1

正如@dan-oswalt 在评论中指定的那样，您必须在与 href 相同的元素上添加 click 事件。它在您尝试时不起作用的原因很可能是因为您尝试了@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>