有没有办法我可以在路由器链接中嵌套一个按钮，当它被点击时只触发按钮而不是两者？

Posted 2023-02-16

【中文标题】有没有办法我可以在路由器链接中嵌套一个按钮，当它被点击时只触发按钮而不是两者？

【英文标题】：Is there a way I can nest a button inside of a router link, and when it's clicked to only trigger the button instead of both?

【发布时间】：2022-01-09 20:22:05

【问题描述】：

为了澄清，我在导航栏中有这个路由器链接，导航栏顶部有一个按钮，可以更改路线。

这是上下文代码：

<router-link v-if="foo" :to="/">
...
  <button @click="redirect"> GO </button>
...

重定向方法：

redirect()  this.$router.push('/myroute').catch(() => )

我尝试在两个元素上都使用 z 索引，但每次我单击 GO 按钮时，它首先会转到“/myroute”，然后返回到“/”

有什么办法可以解决这个问题吗？

【参考方案1】：

您可以调用event.stopPropagation() 来防止此事件在冒泡阶段传播。所以事件只会在按钮元素上停止。

redirect(e) 
    e.stopPropagation();
    this.$router.push('/myroute').catch(() => );

【参考方案2】：

您可以使用 stop 修饰符来@click。

<router-link v-if="foo" :to="/">
...
  <button @click.stop="redirect"> GO </button>
...

这是 stopPropagation 的 vue 等价物。

z-index 更多的是关于按钮的显示。事件传播使得当您单击内部 DOM 元素时，您还单击了 (x,y) 处的所有内容，包括包含节点。如果没有其他东西在监听该事件（通常是这种情况），那么点击会执行您想要的操作。

另一种选择是使按钮和路由器链接同级，并使用带有一些弹性样式的外部<div></div> 将它们放置在您想要的位置。