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 和 none 这些工作。

问题是，如果我删除 href 属性，@click 方法效果很好，但 SEO 要求每个 link.

都有 href 属性

如有任何帮助，我们将不胜感激。

Answer 1

正如@dan-oswalt 在评论中指出的那样，您必须在与 href 相同的元素上添加点击事件。它在您尝试时不起作用的原因很可能是因为您尝试使用 @click.stop 只会停止传播，而不是默认操作。（重定向到 link）。你想要的是阻止浏览器重定向用户：@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 的锚标记

Vue @click doesn't work on an anchor tag with href present

html

javascript

seo

vue.js