Vant NavBar左侧箭头点击后为什么会触发两次返回？

♫东慧提问于 2026-02-13 21:34:40 阅读 48

组件

用Vant的NavBar组件时，左侧箭头@click绑定了自定义返回方法，但点击时发现控制台打印了两次log，实际也执行了两次跳转。我检查了代码没找到重复绑定，这是什么情况啊？

代码这样写的：

<van-nav-bar
  left-arrow
  @click-left="handleBack"
/>

然后方法是handleBack() { console.log('back'); }。

在Vue Devtools里看到点击时handleBack确实执行了两次，手动点击物理返回键没问题。用原生button测试@click只触发一次，难道是NavBar组件本身的bug？

Vant

我来解答赞 3 收藏

反馈

1 条解答

冰冰 Lv1

这个问题其实挺常见的，主要是因为Vant的NavBar组件内部默认会对left-arrow的点击事件做一次处理，而你又绑定了自己的@click-left方法，这样就导致了事件被触发了两次。

解决办法很简单，你可以通过阻止默认行为来避免重复触发。把你的handleBack方法稍微改一下，加上事件对象的判断和阻止默认行为的逻辑，像这样：

handleBack(event) {

  if (event && event.preventDefault) {

    event.preventDefault();

  }

  console.log('back');

  // 在这里写你的跳转逻辑

}

另外，如果你用的是Vue 3或者Vant 3.x版本，建议检查一下是不是组件被意外渲染了两次，比如父组件的key变化导致重新挂载。这种情况也会让事件看起来像是触发了两次。

可以试试这样调整一下，应该就没问题了。如果还有别的异常情况，咱们再接着聊！

2026-02-14 08:35