vue搭建一个树形菜单项目

首先搭建项目需要先通过步骤搭建一个vue的项目，然后创建一个component文件，里面新建一个index.vue页面来。

这是引入的element-ui组件库里的组件，来实现我的路由，渲染的是我存储的动态路由，所以需要先安装并且引用。

npm install element-plus @element-plus/icons-vue

这是菜单管理的

<template><div class="sidebar-container"><!-- 折叠控制 --><div class="collapse-control" style="background-color:#293246" @click="toggleCollapse"><el-icon :size="20" :color="isCollapse ? '#fff' : '#ffd04b'"><component :is="isCollapse ? Expand : Fold" /></el-icon></div><!-- 导航菜单 --><div><el-menu router :default-active="$route.path" background-color="#293246" text-color="#fff" style="height: 100vh"active-text-color="#ffd04b" :collapse="isCollapse"><template v-for="menu in menuArray" :key="menu.path"><!-- 有子级的多层菜单项 --><el-sub-menu v-if="menu.children?.length" index="/layout"><template #title><span>{{ menu.meta.title }}</span></template><el-menu-item v-for="sub in menu.children" :key="'/layout' + sub.path" :index="'/layout' + sub.path"><span>{{ sub.title }}</span></el-menu-item></el-sub-menu><!-- 没子级的单层菜单项 --><el-menu-item v-else :index="menu.path == '/home' ? menu.path : menu.path"><span>{{ menu.meta.title }}</span></el-menu-item></template></el-menu></div></div>
</template>
<script setup>
import { ref } from 'vue'
import { Expand, Fold } from '@element-plus/icons-vue'
const isCollapse = ref(false)
const toggleCollapse = () => {isCollapse.value = !isCollapse.value
}
const menuArray = ref([]);
render();//初始化渲染
function render() {try {const menuList = JSON.parse(sessionStorage.getItem('menuPath') || '[]');const menuName = JSON.parse(sessionStorage.getItem('menuName') || '[]');console.log(menuList, menuName);if (!Array.isArray(menuList) || !Array.isArray(menuName)) {throw new Error('存储数据格式不正确');}const nameMap = new Map(menuName.map(item => [item.name, item]));menuArray.value = menuList.filter(item => item?.name && nameMap.has(item.name)).map(item => ({...item,...nameMap.get(item.name)}));console.log('安全筛选结果：', menuArray.value);} catch (error) {console.error('数据处理失败：', error);// 可以在这里设置默认值或进行错误上报return [];}
}
</script>
<style scoped>
.sidebar-container {transition: width 0.3s;
}.collapse-control {padding: 15px;cursor: pointer;border-bottom: 1px solid #1f2d3d;
}.el-menu--collapse {width: 64px;
}.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;
}
</style>

组件面包屑

<template><!-- <div style="margin-bottom: 20px;width: 100%;"><el-button size="small" @click="addTab(editableTabsValue)">添加标签页</el-button></div> --><el-tabs v-model="editableTabsValue" @tab-click="tabBread" type="card" @tab-remove="removeTab"><el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title":name="item.name" :closable="item.name !== '/home'"><!-- 主页面 --><el-main><router-view /></el-main></el-tab-pane></el-tabs>
</template><script setup>
import { ref, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';const route = useRoute();
const router = useRouter();const editableTabsValue = ref(route.path);
const editableTabs = reactive([{ title: '首页', name: '/home' }
]);// 监听路由变化，同步标签页
watch(() => route.path,(newPath) => {editableTabsValue.value = newPath;if (!editableTabs.some(tab => tab.name === newPath)) {const title = getTitleFromPath(newPath);editableTabs.push({ title, name: newPath });}},{ immediate: true }
);function getTitleFromPath(path) {const titleMap = {'/home': '首页','/layout/user/list': '用户列表','/layout/user/role': '角色列表',// 扩展其他路由...};return titleMap[path] || '新标签';
}
// 点击面包屑标签跳转路由
const tabBread = () => {console.log(editableTabsValue.value);router.push(editableTabsValue.value);
}
const removeTab = (targetName) => {const tabs = editableTabs;let activeName = editableTabsValue.value;if (activeName === targetName) {const currentIndex = tabs.findIndex(tab => tab.name === targetName);const nextTab = tabs[currentIndex + 1] || tabs[currentIndex - 1];activeName = nextTab?.name || '/home';router.push(activeName);}editableTabsValue.value = activeName;editableTabs.splice(0, editableTabs.length, ...tabs.filter(tab => tab.name !== targetName));
};
</script><style scoped>
/* 可以添加自定义样式 */
.el-tabs {margin: 20px;
}
</style>

这部分代码是用来布局菜单框架结构的，然后我们在路由部分引入这个文件的路由即可。

<!-- src/layouts/MainLayout.vue -->
<template><div class="app"><el-container style="height: 100vh;"><!-- 左侧导航栏 --><el-aside width="200px"><aside-nav /></el-aside><div class="menu"><!-- 顶部菜单 --><MyHeader /></div></el-container></div>
</template><script>
import MyHeader from '@/Layout/topHeader.vue'
import AsideNav from '@/components/MenuItem.vue'export default {components: {MyHeader,AsideNav}
}
</script><style>
html,
body {padding: 0;margin: 0;
}.menu {width: 100%;
}
</style>