如何在 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&nbsp;@click.prevent="">A&nbsp;button</button>

Answer 2

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