如何让nuxt-link内的<a>标签仅打开弹窗而不触发跳转？

核心原因 #

点击内部<a>标签时，点击事件会向上冒泡到外层的<nuxt-link>组件，触发了页面跳转逻辑，导致弹窗要等页面返回后才显示。

方法1：用Vue事件修饰符阻止事件冒泡 #

直接在<a>标签的点击事件上添加.stop修饰符，拦截事件向上传递，这样外层<nuxt-link>就不会响应这次点击：

<a
   v-if="showModal" 
   @click.stop="openModal"
   class="modal-link" 
>
   Open Modal
</a>

.stop修饰符本质是调用event.stopPropagation()，切断事件冒泡路径，确保只有弹窗触发逻辑执行。

方法2：替换为语义化按钮（推荐） #

如果这个元素只是用来触发弹窗，没必要用<a>标签（毕竟它没有实际跳转链接），换成<button>更符合语义，同样加上.stop修饰符即可：

<button
   v-if="showModal" 
   @click.stop="openModal"
   class="modal-link" 
>
   Open Modal
</button>

这种方式能避免<a>标签默认行为带来的潜在问题，同时更符合HTML语义规范。

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