vue.js - <router-link> Vue Router @click 事件

Question

我尝试在 <router-link> 上使用点击事件.它有效，但每次单击链接时都会重新加载页面。我想避免它，但我不知道该怎么做。

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

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

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

谢谢!

问候，

T.

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>