nuxt-link内部点击事件异常：点击添加购物车按钮直接跳转页面

你的问题出在**Add to cart按钮嵌套在nuxt-link标签内部**，即便添加了@click.stop，点击按钮时仍会触发nuxt-link的默认跳转行为。这是因为nuxt-link最终渲染为<a>标签，stop修饰符仅能阻止事件冒泡，无法阻止<a>标签自带的跳转默认行为。

方案1：将按钮移出nuxt-link（推荐） #

把购物按钮和跳转链接分离，既符合用户交互逻辑，又从根源避免操作冲突：

<div>
  <nuxt-link to="/home">
    <h1>Title text</h1>
    <p>Product description</p>
  </nuxt-link>
  <p @click="addCart()">Add to cart</p>
</div>

方案2：保留嵌套，同时阻止冒泡和默认行为 #

如果必须将按钮放在nuxt-link内部，需要同时使用stop和prevent修饰符，既阻止事件冒泡到父级nuxt-link，又拦截<a>标签的跳转行为：

<div>
  <nuxt-link to="/home">
    <h1>Title text</h1>
    <p>Product description</p>
    <p @click.stop.prevent="addCart()">Add to cart</p>
  </nuxt-link>
</div>

也可以在函数中手动处理事件：

// 组件方法
methods: {
  addCart(event) {
    event.stopPropagation();
    event.preventDefault();
    // 你的购物车逻辑代码
  }
}

对应模板写法：

<p @click="addCart($event)">Add to cart</p>

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