下面是Menu组件的内容,其中menuList是一些路由信息,根据路由信息动态生成菜单
奇怪的来了:
而去掉这层div后:
正常折叠:
下面补充Menu.vue代码如下:
<template>
<div>
<template v-for="item in menuList" :key="item.path">
<!-- 没有子路由 -->
<template v-if="!item.children">
<el-menu-item
:index="item.path"
v-if="!item.meta.hidden"
@click="goRoute"
>
<el-icon>
<component :is="item.meta.icon"></component>
</el-icon>
<template #title>
<span>{{ item.meta.title }}</span>
</template>
</el-menu-item>
</template>
<!-- 只有一个子路由 -->
<template v-if="item.children && item.children.length == 1">
<el-menu-item
:index="item.children[0].path"
v-if="!item.children[0].meta.hidden"
@click="goRoute"
>
<el-icon>
<component :is="item.children[0].meta.icon"></component>
</el-icon>
<template #title>
<span>{{ item.children[0].meta.title }}</span>
</template>
</el-menu-item>
</template>
<!-- 有多个子路由 -->
<el-sub-menu :index="item.path" v-if="item.children && item.children.length > 1">
<template #title>
<el-icon>
<component :is="item.meta.icon"></component>
</el-icon>
<span>{{ item.meta.title }}</span>
</template>
<!-- 组件递归 -->
<Menu :menuList="item.children"></Menu>
</el-sub-menu>
</template>
</div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
defineProps(["menuList"]);
// 获取路由器
const $router = useRouter();
// 点击菜单的回调
const goRoute = (vc: any) => {
console.log(vc);
// 编程式导航进行路由跳转
$router.push(vc.index);
};
</script>
<style scoped></style>