<router-link> Vue Router @click 事件

Question

我尝试在<router-link>上使用点击事件。它可以工作，但每次单击链接时都会重新加载页面。我想避免这种情况，但是我无法找到解决方法。

我知道<router-link>不接受简单的@ click事件。我在一些论坛上看到@ click.I native会起作用，但是我们知道，它已过时。

所以，我想知道是否有其他解决方案，而不是将路由器链接包装在div中并将侦听器放在该div上。

我之所以要这样做是因为我想在单击链接时动态绑定类。我创建了一个下拉菜单，在单击时触发。但是，当我在下拉菜单内部跟随链接时，菜单仍然保持打开状态。因此，我想添加另一个@click事件，以动态绑定类（display: none）到下拉菜单。问题在于下拉菜单中的项是迭代的，其中向Vuex Mutation发送参数，因此我不能使用常规标签，将路由链接包装在span或div中也没有达到我想要的效果。

谢谢！

问候，

T.

- Slaveworx

---

你没有解释为什么需要覆盖此点击事件。也许你应该通过某个 DIV 的点击处理程序走一条路线，而不是使用 router-link？ - Anatoly

Answer 1

我通过使用一个 div 包装器并更改我的 CSS（这导致代码无法正常工作）来解决了问题。

 <div class="dropdown">
        <a class="dropbtn" @click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
        <div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
          <div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" @click="dropClick">
            <router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
            </router-link>
          </div>
        </div>
      </div>

- Slaveworx

Answer 2

如果我理解您的问题，vue-router（router-link）上有一个“active-class”属性。您可以基于活动路由动态设置您的类。

- Gurkan Ugurlu

---

我创建了一个在点击时触发的下拉菜单。但是，当我在该下拉菜单中跟随链接时，菜单仍然保持打开状态。因此，我想要添加一个额外的 @click 事件来动态绑定一个类（display: none）到下拉菜单上。问题是，下拉菜单中的项目是通过 <router-link> 迭代的，它们向 Vuex Mutation 发送参数，因此我无法使用常规的 <a> 标签，并且将路由器链接包装在 span 或 div 中也没有给我期望的效果。 - Slaveworx

在 router-link 上有一个 "event" 属性。https://router.vuejs.org/api/#event 你可以在这里查看。希望这个能够起作用。 - Gurkan Ugurlu

我不相信这个属性是我需要的。但是感谢您的建议！ - Slaveworx