Question

编辑：我忘了澄清，我要寻找的是知道如何编写具有href属性存在的锚标记，但是当单击元素时，应忽略href并应执行click处理程序

我目前正在使用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.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>

Vue @click不适用于存在href的锚标签

1 个答案: