三级导航栏（Vue3组合式API写法）

<template>
  <div id="nav">
    <ul>
      <li @click="handleDivClick">
        <router-link to="/home">首页</router-link>
      </li>
      <li @click="handleDivClick">
        <router-link to="/product">电影</router-link>
        <ul>
          <li v-for="item in topLevelItems" @click="handleDivClick" :key="item.name">
            <router-link :to="item.href">{{ item.name }}</router-link>
            <ul v-if="item.subItems.length > 0">
              <li v-for="subItem in item.subItems" :key="subItem.name">
                <router-link :to="subItem.href">{{ subItem.name }}</router-link>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface NavItem {
  href: string;
  name: string;
  subItems?: NavItem[];
}

function handleDivClick(event) {
  const link = event.target.querySelector('a');
  if (link) {
    link.click();
  }
}

const topLevelItems = ref<NavItem[]>([]);

// 假设从数据库获取数据的函数
async function fetchNavData() {
  // 模拟从数据库获取数据
  const data = [
    {
      href: "/user",
      name: "科幻",
      subItems: []
    },
    {
      href: "/product",
      name: "悬疑",
      subItems: []
    },
    {
      href: "/product",
      name: "励志",
      subItems: [
        {
          href: "/product",
          name: "风雨哈佛路"
        },
        {
          href: "/product",
          name: "肖申克的救赎"
        },
        {
          href: "/product",
          name: "阿甘正传"
        },
        {
          href: "/product",
          name: "当幸福来敲门"
        }
      ]
    },
    {
      href: "/product",
      name: "爱情",
      subItems: []
    },
    {
      href: "/product",
      name: "惊悚",
      subItems: []
    }
  ];
  topLevelItems.value = data;
}

fetchNavData();
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  text-align: center;
  color: #000;

  li {
    width: 100px;
    display: block;
    float: left;
    line-height: 30px;
    background-color: orange;

    li {
      width: 300px;
      display: none;
      position: relative;
      background-color: #6ef7f7;

      ul {
        width: 100px;
        height: 30px;
        position: absolute;
        left: 300px;
        top: 0px;

        li {
          background-color: #c56ef7;
        }
      }
    }
  }

  li:hover {
    background-color: #ffd700;

    ul li {
      display: block;
      ul li {
        display: none;
      }
    }

    ul li:hover {
      background-color: #d4f2e7;
      ul li {
        display: block;
      }
      ul li:hover {
        background-color: #e7beff;
      }
    }
  }
}
</style>

仅供娱乐，理性吃瓜。