时间戳

首页 > 解决方案 > 如何在RouterLink中包含一个按钮，以便在按钮单击时不会发生导航

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

问题描述

假设，我有以下标记：

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

我正在使用，因为在元素内tag="div"嵌套 a不是有效的 HTML5。<button>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 。

标签： javascripthtmlvue.jsvue-router

解决方案

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

推荐阅读