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

Posted 2023-02-22

【中文标题】如何在RouterLink中包含一个按钮，以便在按钮单击时不会发生导航

【英文标题】：How to enclose a button in RouterLink, so that the navigation does not occur on button click

【发布时间】：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。

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

我已经尝试过您的解决方案，但很遗憾，它不起作用

你能发布你的“构建”版本的代码吗？所以我可以试试，因为我认为是 css 相关的

当然，我正在创建 MCVE

刚刚编辑了问题以包含有关 MCVE 的信息