在Vue中，可以通过监听鼠标移入事件来动态显示导航栏的二级菜单。以下是一个简单的示例，假设我们有一个异步获取二级菜单数据的场景：
<template>
<div>
<ul class="nav">
<li v-for="item in menuItems" :key="item.id" @mouseenter="showSubmenu(item)">
{{ item.name }}
<ul v-if="item.showSubmenu" class="submenu">
<li v-for="subitem in item.submenu" :key="subitem.id">{{ subitem.name }}</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [],
};
},
methods: {
async fetchMenuData() {
// 示例异步获取菜单数据
const menuData = await fetch('api/menu-data').then(res => res.json());
this.menuItems = menuData.map(item => ({
...item,
showSubmenu: false,
submenu: [], // 初始化子菜单为空数组
}));
},
async showSubmenu(item) {
if (!item.submenu.length) {
// 如果子菜单为空，则异步获取
const submenuData = await fetch(`api/submenu-data?parentId=${item.id}`).then(res => res.json());
item.submenu = submenuData; // 更新子菜单数据
}
item.showSubmenu = true; // 显示子菜单
}
},
created() {
this.fetchMenuData(); // 组件创建时获取菜单数据
}
};
</script>
<style>
.submenu {
display: none; /* 默认不显示子菜单 */
}
.nav li:hover .submenu {
display: block; /* 鼠标移入导航项时显示子菜单 */
}
</style>在这个例子中，我们有一个导航栏组件，其中包含一个menuItems数组来存储顶部菜单项。每个菜单项都可以有一个submenu属性，用于存储对应的二级菜单项。当鼠标移入顶部菜单项时，showSubmenu方法会被触发，该方法会检查是否已经获取了对应的二级菜单数据，如果没有，它会从API异步获取数据，然后更新菜单项的submenu属性，并设置showSubmenu为true以显示子菜单。CSS用于控制子菜单的显示，当鼠标悬停在顶部菜单项上时显示。