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

Question

Let's say, I have the following markup:

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

I'm using tag="div" , because nesting a <button> inside an a element is not valid HTML5 .

With this markup, clicking anywhere inside the RouterLink , including a paragraph and a button, will cause navigation.

But my requirement is that clicking on the button does not cause navigation, but clicking on other elements does.

So, I use a div with @click handler that checks whether the clicked element is a button or its descendant and only navigates if not:

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

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

But I'm wondering if there is a cleaner way of doing this.

I have also created an MCVE: https://codesandbox.io/s/vue-routerlink-button-3dlyx .

Answer 1

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

Answer 2

这是因为按钮位于“点击区域”下，这意味着它不是可定位的，请尝试将相对位置和 z-index: 99 设置为按钮，并让我知道