如何让router-link内嵌的按钮点击时仅触发自身事件不触发路由跳转

问题原因 #

点击GO按钮时，点击事件会向上冒泡到外层的router-link组件，触发router-link的默认路由跳转逻辑，所以会出现先跳转到/myroute、随后又被外层router-link带回/的现象，z-index只能控制元素渲染层级，无法阻止事件冒泡行为。

可行解决方法 #

方法1：使用Vue内置的.stop事件修饰符（最推荐） #

直接给按钮的点击事件添加.stop修饰符，即可一键阻止事件向上冒泡，无需修改其他逻辑：

<router-link v-if="foo" :to="/">
...
  <button @click.stop="redirect"> GO </button>
...
</router-link>

方法2：在点击事件回调中手动阻止冒泡 #

如果需要在回调函数中做其他事件相关处理，可以手动传递事件对象并调用阻止冒泡方法：

1. 调整按钮绑定逻辑，传递原生事件对象：

<button @click="redirect($event)"> GO </button>

2. 修改redirect方法，添加阻止冒泡逻辑：

redirect(e) {
  // 阻止事件向上冒泡到外层router-link
  e.stopPropagation()
  this.$router.push('/myroute').catch(() => {})
}

以上两种方法都可以完全避免外层router-link的跳转被触发，实现仅执行按钮绑定的跳转逻辑的需求。

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