如何在RouterLink中包含一个按钮，以便在按钮单击时不会发生导航答案

【问题标题】：How to enclose a button in RouterLink, so that the navigation does not occur on button click如何在RouterLink中包含一个按钮，以便在按钮单击时不会发生导航
【发布时间】：2021-01-31 16:23:21
【问题描述】：

假设，我有以下标记：

<RouterLink tag="div" to="/somepath">
    <p>Lorem ipsum dolor sit amet.</p>
    ...
    <button>A button</button>
</RouterLink>

我使用tag="div"，因为在a 元素is not valid HTML5 中嵌套了<button>。

使用此标记，单击@987654327@ 内的任意位置（包括段落和按钮）将导致导航。

但我的要求是点击按钮不会导致导航，但点击其他元素会。

所以，我使用div 和@click 处理程序来检查单击的元素是按钮还是它的后代，如果不是，则仅导航：

<div @click="navigateSomewhere">
    ...
</div>

export default {
  methods: {
    navigateSomewhere($event) {
      if(!$event.closest("button"))
        this.$router.push("/somePath")
    }
  }
}

但我想知道是否有更清洁的方法。

我还创建了一个 MCVE：https://codesandbox.io/s/vue-routerlink-button-3dlyx。

【问题讨论】：

标签： javascript html vue.js vue-router

【解决方案1】：

<button @click.prevent="">A button</button>

【讨论】：

【解决方案2】：

这是因为按钮在“点击区域”下，不是targettable，尝试将位置相对和z-index：99设置为按钮，让我知道

【讨论】：

我已经尝试过您的解决方案，但很遗憾，它不起作用
你能发布你的“构建”版本的代码吗？所以我可以试试，因为我认为是 css 相关的
当然，我正在创建 MCVE
刚刚编辑了问题以包含有关 MCVE 的信息