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

Question

比方说，我有以下标记：<RouterLink tag="div" to="/somepath">    <p>Lorem ipsum dolor sit amet.</p>    ...    <button>A button</button></RouterLink>我正在使用tag="div"，因为在元素<button>内嵌套 a是无效的 HTML5。a使用此标记，单击 中的任意位置RouterLink（包括段落和按钮）将导致导航。但我的要求是点击按钮不会导致导航，但点击其他元素会。因此，我使用divwith@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 。

Answer 1

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




Answer 2

这是因为按钮在“点击区域”下，菜单不是目标对象，请尝试将位置相对和 z-index: 99 设置为按钮，并告诉我