Vue3实现含RouterLink的li整栏跳转及外部点击关闭下拉菜单

一、实现点击整个li栏触发页面跳转 #

有两种常用方式可以实现：

方式1：通过CSS让RouterLink充满整个li #

将RouterLink设置为块级元素，使其占满li的宽高，这样点击li的任何区域都会触发RouterLink的跳转。

<template>
  <ul>
    <li v-for="product in products" :key="product">
      <RouterLink :to="/product" class="full-link">{{ product }}</RouterLink>
    </li>
  </ul>
</template>

<style scoped>
.full-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px 12px; /* 适配你的栏状结构，保持原有内边距 */
  text-decoration: none;
  color: inherit; /* 继承li的文字颜色，保证样式统一 */
}
</style>

方式2：给li绑定点击事件触发路由跳转 #

通过useRouter获取路由实例，给li绑定点击事件调用router.push，同时阻止RouterLink的默认点击事件避免重复跳转。

<template>
  <ul>
    <li v-for="product in products" :key="product" @click="navigateToProduct">
      <RouterLink :to="/product" @click.stop>{{ product }}</RouterLink>
    </li>
  </ul>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const navigateToProduct = () => {
  router.push('/product');
};
</script>

二、点击下拉菜单外部关闭菜单 #

通过监听全局点击事件，判断点击区域是否在菜单内部，若不在则关闭菜单。需要配合ref获取菜单元素，以及控制菜单显示的变量。

<template>
  <div class="dropdown-container">
    <button @click="toggleMenu">产品菜单</button>
    <ul ref="menuRef" v-show="isMenuOpen">
      <li v-for="product in products" :key="product">
        <RouterLink :to="/product" class="full-link">{{ product }}</RouterLink>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const isMenuOpen = ref(false);
const menuRef = ref(null);

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

const handleClickOutside = (event) => {
  if (menuRef.value && !menuRef.value.contains(event.target)) {
    isMenuOpen.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

注意：如果菜单内部元素使用了@click.stop阻止事件冒泡，可能会影响外部点击判断，需根据实际情况调整。

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