如何在 RouterLink 中包含一個按鈕，以便在單擊按鈕時不會發生導航

Question

假設我有以下標記：

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

我正在使用tag="div" ，因為在a元素內嵌套<button>是無效的 HTML5 。

使用此標記，單擊RouterLink內的任意位置（包括段落和按鈕）將導致導航。

但我的要求是點擊按鈕不會導致導航，但點擊其他元素會。

因此，我使用帶有@click處理程序的div來檢查單擊的元素是按鈕還是它的后代，如果不是，則僅導航：

<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 設置為按鈕，並讓我知道