<router-link> Vue 路由器 @click 事件答案

【问题标题】：<router-link> Vue Router @click event<router-link> Vue 路由器 @click 事件
【发布时间】：2021-03-17 14:58:17
【问题描述】：

我尝试在<router-link> 上使用点击事件。它可以工作，但每次单击链接时都会重新加载页面。我想避免它，但我不知道如何。

我知道<router-link> 不接受简单的@click 事件。我在一些论坛上看到 @click.I native 可以工作，但我们知道，这已被弃用。

所以我想知道除了将路由器链接包装在 div 中并将侦听器放在该 div 上之外是否有任何解决方案。

我想这样做的原因是我想在点击链接时绑定一个类。我创建了一个触发 onClick 的下拉菜单。但是，当我点击该下拉菜单中的链接时，菜单仍然打开。因此，我想要一个额外的@click 事件来动态地将一个类（显示：无）绑定到下拉菜单。问题是下拉列表中的项目是迭代的，它们将参数发送到 Vuex Mutation，因此我不能使用常规标签，并且用 span 或 div 包装路由器链接也没有给我想要的效果。

谢谢！

问候，

【问题讨论】：

您没有解释为什么需要覆盖此点击事件。也许您应该通过某个 DIV 的单击处理程序中的路由而不是使用路由器链接？

标签： vue.js vue-router

【解决方案1】：

如果了解您的问题，vue-router(router-link) 上有一个“active-class”属性。您可以根据活动路由动态设置类。

【讨论】：

我创建了一个下拉菜单，它在点击时触发。然后，当我点击该下拉菜单中的链接时，菜单保持打开状态。因此，我想要一个额外的@click 事件来动态地将一个类（显示：无）绑定到下拉菜单。问题是下拉列表中的项目是迭代的<router-link>，它将参数发送到 Vuex Mutation，因此我不能使用常规的<a> 标签并用 span 或 div 包装路由器链接也没有给我想要的效果。
路由器链接上有一个“事件”属性。 router.vuejs.org/api/#event你可以看这里。我希望这行得通。
我不相信这个属性是我需要的。但感谢您的意见！

【解决方案2】：

我已经设法使用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>

【讨论】：