< Router -link> Vue Router @click事件

Question

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

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

因此，我想知道除了将路由器链接包装在div中并将侦听器放在该div中之外，是否还有其他解决方案。

我之所以要这样做，是因为我想在单击链接时绑定一个类。我已经创建了一个由onClick触发的下拉菜单。但是当我点击下拉菜单中的一个链接时，菜单仍然是打开的。因此，我希望有一个额外的@click事件来动态地将一个类(display: none)绑定到下拉菜单。问题是，dropdown中的项是迭代的，这会将参数发送到Vuex突变，因此我不能使用常规标记，并且用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>

Answer 2

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