Tailwind＆Vue-Router-单击菜单项时，下拉菜单不会关闭

如何解决Tailwind＆Vue-Router-单击菜单项时，下拉菜单不会关闭

我正在使用顺风和VUE路由器https://codepen.io/huphtur/pen/ordMeN中的以下下拉菜单。

我需要在下拉菜单中使用<router-link to="/">，但我发现这样做后，一旦单击菜单链接，下拉菜单将无法正常运行。使用普通的<a>元素，下拉菜单会关闭。

这是代码：

下拉元素组合

<div v-if="isOpen == false" class="dropdown inline-block relative sm:ml-20">
          <button class="text-gray-700 font-normal py-2 px-4 rounded inline-flex items-center">
            <span class="mr-1 cursor-default">Vita</span>
          </button>
          <ul class="w-32 dropdown-menu absolute hidden text-gray-700 pt-1 shadow-lg z-10">
            <li > <router-link to="/biografia"> <a class="rounded-t bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Bio </a> </router-link> </li>
            <li > <router-link to="/tour"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Tour </a> </router-link> </li>
            <li > <router-link to="/foto"> <a class="bg-white hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Foto </a> </router-link> </li>
            <li > <router-link to="/video"> <a class="rounded-b bg-white  hover:bg-gray-200 py-2 px-4 block whitespace-no-wrap text-sm"> Video </a> </router-link> </li>
          </ul>
        </div>
}

组合中的

css样式

.dropdown:hover .dropdown-menu {
  display: block;
} 

如何使用<router-link to="/">实现此功能？

谢谢！

解决方法

router-link为您提供了一个用于启用自定义的插槽。过去，li处于活动状态时，我曾使用过这种样式将样式应用于外部router-link元素，但是您也可以使用相同的方法来关闭下拉菜单。

  <router-link
    to="/"
    v-slot="{ href,route,navigate,isActive,isExactActive }"
  >
    <a
      :href="href"
      @click="isOpen = false; navigate($event)"
    >
      Homepage
    </a>
  </router-link>

Source