Vue3中用纯JS检测<router-link>点击，解决Flowbite下拉菜单问题

核心思路 #

Vue3的<router-link>组件默认会渲染为带有router-link类的<a>标签，因此可以通过原生JS的事件监听+DOM选择器来捕获其点击事件，无需依赖Vue的事件绑定。

方案1：全局监听（适用于所有router-link） #

通过监听document的点击事件，向上查找是否为router-link渲染的元素：

document.addEventListener('click', (e) => {
  // 匹配router-link渲染的a标签（带router-link类或Vue生成的标识属性）
  const targetRouterLink = e.target.closest('.router-link, [data-v-router-link]');
  if (targetRouterLink) {
    // 确认点击的是router-link，执行后续隐藏下拉菜单的逻辑
    console.log('router-link被点击');
    // 这里可以调用Flowbite下拉菜单的隐藏方法，比如：
    // const dropdownInstance = Dropdown.getInstance(document.getElementById('你的下拉触发器ID'));
    // dropdownInstance.hide();
  }
});

方案2：限定下拉菜单内的router-link（更高效） #

如果只需要监听下拉菜单内的router-link，可以直接给下拉容器绑定事件，缩小监听范围：

// 先获取下拉菜单的容器元素
const dropdownMenu = document.getElementById('你的下拉菜单容器ID');
if (dropdownMenu) {
  dropdownMenu.addEventListener('click', (e) => {
    // 匹配下拉菜单内的router-link（路由链接通常以/开头，且带router-link类）
    const targetRouterLink = e.target.closest('a.router-link[href^="/"]');
    if (targetRouterLink) {
      console.log('下拉菜单内的router-link被点击');
      // 执行隐藏下拉菜单的逻辑
    }
  });
}

注意事项 #

• 如果你的<router-link>使用了custom属性自定义渲染元素（比如按钮），需要调整选择器匹配实际渲染的元素。
• Flowbite的下拉菜单通常可以通过获取实例调用hide()方法，或者手动移除hidden类来隐藏。

内容的提问来源于stack exchange，提问作者FerchoCarcho