Vue可点击tr内嵌套router-link事件冒泡引发跳转冲突如何解决

解决方案 #

你之前的修饰符使用错误才导致问题未解决，可选择以下任意一种方案实现需求，不需要单独给其余<td>绑定点击事件：

方案1：使用正确的事件修饰符阻止冒泡

你之前用了@click.native.prevent，prevent是阻止元素默认行为，你需要用stop修饰符停止事件向上冒泡即可。
修改router-link代码如下：

<router-link
  :to="{ name: 'platformUsers', params: {id: platform.id} }"
  @click.native.stop
>
  {{ platform.users.length }}
</router-link>

注意：如果你使用的是Vue Router 4.x（对应Vue3项目），不需要加.native修饰符，直接写@click.stop即可。

方案2：父级点击事件加来源判断

也可以在tr的点击事件里判断点击来源，如果点击的是链接元素则不执行跳转编辑页的逻辑：
首先修改tr的事件绑定，传入原生事件对象：

<tr
  @click="editPlatform(platform.id, $event)"
  v-for="platform in platforms"
  :key="'platform_table_' + platform.id"
>

然后修改editPlatform方法：

methods: {
  editPlatform(id, e) {
    // 如果点击目标是<a>标签（router-link渲染后就是a标签），直接终止逻辑
    if (e.target.closest('a')) return
    this.$router.push({ name: 'editPlatform', params: { id: id } });
  },
}

补充说明你之前尝试的方法为什么无效：

• pointer-events: none会让元素完全不响应点击事件，你的router-link本身的路由跳转也会失效，自然达不到需求
• @click.native.prevent会阻止a标签的默认跳转行为，反而会导致router-link本身的路由跳转受影响，同时没有阻止事件冒泡，父级tr的点击事件还是会触发

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