当前位置：首页 > news >正文

vue搭建一个树形菜单项目

news 来源：原创 2025/7/14 13:27:37

首先搭建项目需要先通过步骤搭建一个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>

vue搭建一个树形菜单项目

首先搭建项目需要先通过步骤搭建一个vue的项目，然后创建一个component文件，里面新建一个index.vue页面来。这是引入的element-ui组件库里的组件，来实现我的路由，渲染的是我存储的动态路由，所以需要先安装并且引用。 …...

编程日记 2025/7/14 13:27:37

Python包管理完全指南：pip常用命令与最佳实践

一、pip核心功能解析作为Python官方推荐的包管理工具，pip承担着以下关键职责： 从PyPI（Python Package Index）仓库安装/卸载第三方库管理项目依赖关系和版本控制支持本地/私有仓库的包安装维护虚拟环境中的包隔离二、20个必知…...

编程日记 2025/7/10 4:58:36

Eigen 3

本文来源：腾讯元宝 Eigen 3 是一个专注于线性代数运算的高性能 C 模板库，广泛应用于科学计算、机器学习、计算机视觉等领域。以下是其核心特性与功能的综合介绍： 1. 核心定义与设计理念纯头文件库：Eigen 3 无需编译或链接…...

编程日记 2025/7/12 7:49:29

数字化转型国家标准- GB/T 45341-2025《数字化转型管理参考架构》

GB/T 45341-2025《数字化转型管理参考架构》前言一、数字化转型的根本任务二、标准的主要内容2.1、核心概念2.2、总体框架2.3、主要视角2.4、过程方法2.5、发展阶段与水平档次前言在工业和信息化部和国家标准化管理委员会的指导下，全国信息化和工业化融合管…...

编程日记 2025/7/10 22:39:31

Redis 源码硬核解析系列专题 - 第三篇：核心数据结构之字典（Dict）

1. 引言字典（Dict）是Redis的核心数据结构之一，用于实现键值存储（Redis数据库的核心）和内部元数据管理（如客户端状态）。Redis的字典基于哈希表实现，支持高效的增删改查操作。本篇将深入剖析其源码实现，包括哈希表结构、冲突解决和渐进式rehash机制。 2. 字典的结构体…...

编程日记 2025/7/13 11:07:44

JS—异步编程：3分钟掌握异步编程

个人博客：haichenyi.com。感谢关注一. 目录一–目录二–引言三–JavaScript 事件循环机制四–定时器的秘密：setTimeout 和 setInterval五–异步编程模型对比二. 引言在现代Web开发中，异步编程是提升性能的关键技术。无论是脚本加载&am…...

编程日记 2025/7/10 0:40:24

Linux C语言调用第三方库，第三方库如何编译安装

在 Linux 环境下使用 C 语言调用第三方库时，通常需要先对第三方库进行编译和安装。以下为你详细介绍一般的编译安装步骤，并给出不同类型第三方库（如使用 Makefile、CMake 构建系统）的具体示例。一般步骤 1. 获取第三方库源码 …...

编程日记 2025/7/12 2:28:42

gogs私服搭建

一.介绍： gogs是一个用Go语言开发的自助Git服务，目标是简单、快速搭建Git服务， 支持多种平台，包括Linux、Windows等。它类似于GitHub，但更轻量，适合个人或小团队使用， 在简化git服务搭建流程的…...

编程日记 2025/7/11 4:23:01

python和c中作用域的差异

好的，我将详细列举 Python 和 C 语言在作用域规则上的主要差异，并为每种差异提供具体的代码示例，以便更清晰地理解它们之间的不同。 1. 块级作用域（Block Scope） C 语言在 C 语言中，任何用 {} 包裹的代…...

编程日记 2025/7/7 19:25:02

C++ 中将函数作为参数传递

C 中将函数作为参数传递 1. 通过指针传递函数函数可以通过传递函数的地址来作为参数传递；简而言之，就是通过指针实现这一点。示例代码 #include <iostream> using namespace std;// 定义加法和减法函数 #include <iostream> #include …...

编程日记 2025/7/13 19:00:14

【C++】右值引用与完美转发

目录一、右值引用： 1、左值与右值： 2、左值引用和右值引用： 二、右值引用的使用场景： 1、左值引用的使用场景： 2、右值引用的使用场景： 移动构造移动赋值三、完美转发： 1、万能引用…...

编程日记 2025/7/9 23:32:14

批量合并 PDF 文档，支持合并成单个文档，也支持按文件夹合并 PDF 文档

在日常工作中，合并多个 PDF 文档为一个文件是非常常见的需求。通过合并 PDF，不仅能够更方便地进行管理，还能在特定场景下（如批量打印）提高效率。那么，当我们需要批量合并多个 PDF 文件时，是否有…...

编程日记 2025/7/10 16:35:08

SQL Server 备份相关信息查看

目录标题一、统计每个数据库在不同备份目录和备份类型下的备份次数，以及最后一次备份的时间整体功能详细解释二、查询所有完整数据库备份的信息，包括备份集 ID、数据库名称、备份开始时间和备份文件的物理设备名称，并按备份开始时间降序排列…...

编程日记 2025/7/8 18:36:21

Flutter_学习记录_AppBar中取消leading的占位展示

将leading设置为null将automaticallyImplyLeading设置为false 看看automaticallyImplyLeading的说明： Controls whether we should try to imply the leading widget if null. If true and [AppBar.leading] is null, automatically try to deduce what the leading…...

编程日记 2025/7/12 23:47:07

多省发布！第27届中国机器人及人工智能大赛各赛区比赛通知

01 大赛介绍中国机器人及人工智能大赛是由中国人工智能学会主办的极具影响力的全国性学科竞赛，旨在推动我国机器人及人工智能技术的创新与应用，促进相关专业的人才培养。作为全国高校学科竞赛A类赛事，该比赛吸引了众多高校和科研机构的积极…...

编程日记 2025/7/10 14:14:54

leetcode199 二叉树的右视图

小问题：if(!q.empty()) 这个条件会导致只处理一层，而不会处理所有层。正确的做法应该是用 while(!q.empty()) 循环处理每一层。 class Solution { public:vector<int> rightSideView(TreeNode* root) {vector<int> res;queue<TreeNode…...

编程日记 2025/7/10 20:09:15

大模型评测框架evalscope、openCompass

一、evalscope使用说明 1、如何使用智增增的接口： VLLM_USE_MODELSCOPETrue evalscope eval \--model qwen2.5-14b-instruct \--api-url https://api.zhizengzeng.com/v1/chat/completions \--api-key skxxx \--eval-type service \--datasets gsm8k \--limit 10 …...

编程日记 2025/7/11 5:11:48

接口自动化——初识pytest

缩写单词含义.passed通过Ffailed失败（用例执行时报错）Eerror出错（fixture执行报错）sskipped跳过Xxpassed预期外的通过（不符合预期）xxfailed预期内的失败（符合预期） 1.pytest 配置 1…...

编程日记 2025/7/4 18:26:20

SkyWalking实战

1、下载SkyWalking APM 1.手动下载 Downloads | Apache SkyWalkinghttps://skywalking.apache.org/downloads/ 2.链接下载 https://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-apm-10.2.0.tar.gzhttps://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-…...

编程日记 2025/7/1 1:18:46

游戏AI实现-GOAP

GOAP原理： GOAP（面向目标的行动规划，Goal - Oriented Action Planning） 旨在让智能体通过选择一系列行动来达成特定目标。它基于对世界状态的理解，每个行动都有前提条件和效果。智能体通过分析当前世界状态与目标状态…...

编程日记 2025/7/13 9:09:07

Baklib内容中台的核心优势是什么？

智能化知识管理引擎 Baklib的智能化知识管理引擎通过多源数据整合与智能分类技术，实现企业知识资产的自动化归集与动态更新。系统内置的语义分析算法可自动识别文档主题，结合自然语言处理技术生成结构化标签体系，大幅降低人工标注成本。针对…...

编程日记 2025/7/11 14:47:06

windows第二十章单文档应用程序

文章目录单文档定义新建一个单文档应用程序单文档应用程序组成：APP应用程序类框架类（窗口类）视图类（窗口类，属于框架的子窗口）文档类（对数据进行保存读取操作） 直接用向导创建单文档…...

编程日记 2025/6/28 1:35:59

eBay多账号安全运营技术体系：从环境隔离到智能风控的工程化实践

一、多账号运营风险模型解析 （技术化重构关联检测机制） 环境指纹维度： 浏览器指纹参数：Canvas/WebGL渲染特征（差异度要求≥98%） 设备指纹参数：GPU型号/声卡特征（识别准确率92%&…...

编程日记 2025/7/9 1:35:59

《Python Web网站部署应知应会》No4：基于Flask的调用AI大模型的高性能博客网站的设计思路和实战（上）

基于Flask的调用AI大模型的高性能博客网站的设计思路和实战（上） 摘要本文详细探讨了一个基于Flask框架的高性能博客系统的设计与实现，该系统集成了本地AI大模型生成内容的功能。我们重点关注如何在高并发、高负载状态下保持系统的高性能和…...

编程日记 2025/7/10 8:30:22

vulnhub-Node1

一、信息收集 1、扫靶机ip arp-scan -l 2、端口扫描淦，只有22端口和3000端口，访问一下3000端口吧，估计是个网页 nmap -p- -Pn -sC -sV -n 192.168.66.130PORT STATE SERVICE VERSION 22/tcp open ssh OpenSS…...

编程日记 2025/7/13 20:15:13

什么是 OLAP 数据库？企业如何选择适合自己的分析工具

引言：为什么企业需要 OLAP 数据库？ 你是否曾经经历过这样的场景： 市场部门急需一份用户行为分析报告，数据团队告诉你：“数据太大了，报表要跑 4 个小时”；业务负责人在会议中提出一个临时性分析…...

编程日记 2025/7/13 22:27:58

计算机视觉准备八股中

一边记录一边看，这段实习跑路之前运行完3DGAN，弄完润了，现在开始记忆八股 1.CLIP模型的主要创新点： 图像和文本两种不同模态数据之间的深度融合、对比学习、自监督学习 2.等效步长是每一步操作步长的乘积 3.卷积层计算输入输出…...

编程日记 2025/7/13 17:06:28

电源系统的热设计与热管理--以反激式充电器为例

前言反激电源常用于各种电子设备中，比如充电器、适配器等，它们通过变压器进行能量转换。高温环境可能对电子元件造成影响，特别是像MOSFET、二极管、变压器这样的关键部件，导致效率变低，甚至可能导致功能失效。还有安…...

编程日记 2025/7/7 9:44:56

【云服务器】在Linux CentOS 7上快速搭建我的世界 Minecraft 服务器搭建，并实现远程联机，详细教程

【云服务器】在Linux CentOS 7上快速搭建我的世界 Minecraft 服务器搭建，详细详细教程一、服务器介绍二、下载 Minecraft 服务端三、安装 JDK 21四、搭建服务器五、本地测试连接六、添加服务，并设置开机自启动前言： 推荐使用云服务器部署&…...

编程日记 2025/7/8 13:57:06

vue数据两个相同的参数对比只显示一个

vue数据两个相同的参数对比只显示第一个如每条的rq0/rq1对比data() { return{dataList: [{CurrencyName: "现金",rq0: "2017-10-20 19:22:17",rq1: "2018-02-07 19:48:00",yje: -1179.8},{CurrencyName: "微支付",rq0: "2017-10…...

编程日记 2025/7/8 13:57:14

vue如何实现前端控制动态路由

在 Vue.js 中，动态路由是一种根据不同用户权限或其他因素动态改变路由列表的功能。这种机制允许开发者根据后端提供的权限数据动态渲染前端路由，实现多用户权限系统，不同用户展示不同的导航菜单。动态路由的配置动态路由的配置涉及到前端…...

编程日记 2025/7/11 20:51:39

开发环境部署

一、安装Django-5.0.3 1、将已下载的软件通过winscp上传至centos下 2、安装 [root@hcss-ecs-1e19 ~]# ll total 10372 -rw-r--r-- 1 root root 10620661 Feb 10 10:16 Django-5.0.3.tar.gz [root@hcss-ecs-1e19 ~]# pip3 install Django-5.0.3.tar.gz Processing ./Django-…...

编程日记 2025/7/11 20:06:49

C语言入门教程100讲（0）从了解C语言的发展史开始

文章目录引言1. C语言的起源2. C语言的诞生3. C语言的标准化4. C语言的进一步发展5. C语言的影响与应用6. C语言的未来结语引言 C语言作为一种高效、灵活且具有广泛应用的编程语言，在计算机科学史上占据着举足轻重的地位。它的设计不仅影响了后来的编程语言，也对操作系统、…...

编程日记 2025/7/10 23:56:33

笔记本电脑更换主板后出现2203:System configuration is invalid，以及2201、2202系统错误的解决

笔记本电脑更换主板后启动出现2203:System configuration is invalid，以及2201、2202系统错误的解决自用的一台ThinkpadT490笔记本电脑，由于主板故障，不得不更换主板，通过某宝购置主板后进行了更换。具体拆卸笔记本可搜索网络视频教程。注意：在更换主板时，注意先拍…...

编程日记 2025/7/14 1:30:00

如何为 Debian 和 Kali 系统更换软件源并更新系统

在 Linux 系统中，软件源（Software Repository）是获取软件包和更新的核心途径。然而，默认的软件源可能会因为地理位置、网络状况等原因导致下载速度缓慢，甚至无法访问。为了提升系统的软件获取效率，许多用户…...

编程日记 2025/7/14 1:19:21

git：远程仓库拉取到本地，fork到本地，修改后再上传

讲述仓库成员拉取远程仓库（即组长的仓库，里面有成员）到本地，修改内容再上传的详细步骤： 1.进入仓库，首先fork （如不，所作操作会直接对远程仓库进行，不用管理员审核&…...

编程日记 2025/7/9 1:15:44

C++ 中名字的作用域、概念、嵌套与实践（十八）

1. 名字的作用域基本概念作用域（scope） 指的是程序中的一个区域（通常被花括号 {} 包围），在这里一个名字（如变量名、函数名、类名等）有其特定含义。在同一个作用域中，一个名字只…...

编程日记 2025/7/11 5:08:32

Go语言nil原理深度解析：底层实现与比较规则

Go语言nil原理深度解析：底层实现与比较规则引言在Go语言中，nil 是一个特殊的关键字，用于表示引用类型的“零值”。它在指针、切片、映射、通道、接口和函数等类型中广泛使用。本文将从底层实现、比较规则、与其他语言的对比等角度&#…...

编程日记 2025/7/5 10:09:49

使用Java操作Redis

文章目录常用Redis键操作命令使用Java操作Redis配置 Redis 连接信息创建 Maven 项目结构操作字符串操作列表操作集合操作散列操作有序集合总结报错解决办法： 当使用redis-cli连接客户端出现not connected时使用redis-cli -h 192.168.222.101 -p 6379即可解决 …...

编程日记 2025/7/11 23:33:24

开源的CMS建站系统可以随便用吗？有什么需要注意的？

开源CMS建站系统虽然具有许多优点，但并非完全“随便用”。无论选哪个CMS系统，大家在使用的时候，可以尽可能地多注意以下几点： 1、版权问题了解开源许可证：不同的开源CMS系统采用不同的开源许可证，如GPL、…...

编程日记 2025/7/14 10:34:39

数据结构：探秘AVL树

本节重点理解AVL树的概念掌握AVL树正确的插入方法利用_parent指针正确更新平衡因子掌握并理解四种旋转方式：左单旋，右单旋，左右双旋，右左双旋一、AVL树的概念 AVL树得名于它的发明者G. M. Adelson-Velsky和E. M. Landis&…...

编程日记 2025/7/9 15:06:31

C++ 变量与初始化详解（十五）

1. 变量定义在 C 中，定义变量的基本形式通常是先写出类型说明符（type specifier），后面紧跟由逗号分隔的一个或多个变量名，最后以分号结束。简单示例如下： int sum 0, value, units_sold 0; Sales_ite…...

编程日记 2025/7/11 15:47:57

【网络协议详解】—— STP 、RSTP、MSTP技术（学习笔记）

一、STP技术工作原理 STP（Spanning Tree Protocol）生成树协议（IEEE 802.1D）是一种网络协议，用于在网络拓扑中防止环路的产生。在二层交换网络中，逻辑上阻塞部分接口，实现从根交换机到所有节点的…...

编程日记 2025/7/8 1:59:44

C++中将记录集的数据复制到Excel工作表中的CRange类CopyFromRecordset函数异常怎么捕获

文章目录一、异常类型及捕获逻辑二、完整代码示例三、关键错误场景与解决方案1. CopyFromRecordset 返回空数据2. COM错误 0x800A03EC3. Excel进程残留4. 内存不足四、调试与日志记录1. 启用详细日志2. 捕获错误描述3. 调试断点五、最佳实践在C中使用 CRange::CopyFromReco…...

编程日记 2025/7/13 23:32:24

综述速读|086.04.24.Retrieval-Augmented Generation for AI-Generated Content A Survey

论文题目：Retrieval-Augmented Generation for AI-Generated Content: A Survey 论文地址：https://arxiv.org/abs/2402.19473 bib引用： misc{zhao2024retrievalaugmentedgenerationaigeneratedcontent,title{Retrieval-Augmented Generation…...

编程日记 2025/7/10 22:24:24

对内核fork进程中写时复制的理解记录

前言文章写于学习Redis时对aof后台重写中写时复制的疑问一、感到不理解的歧义在部分技术文档中（以小林的文章为例），对写时复制后的内存权限存在如歧义： ! 二、正确技术表述根据Linux内核实现（5.15版本&#x…...

编程日记 2025/7/12 1:56:29

【新手初学】SQL注入getshell

一、引入木马介绍： 木马其实就是一段程序，这个程序运行到目标主机上时，主要可以对目标进行远程控制、盗取信息等功能，一般不会破坏目标主机，当然，这也看黑客是否想要搞破坏。木马类型： 按照功…...

编程日记 2025/7/10 1:38:23

【湖北工业大学2025年ACM校赛（同步赛）】题解

比赛链接 A. 蚂蚁上树题目大意给定一棵 n n n 个结点的树，根结点为 1 1 1。每个叶结点都有一只蚂蚁，每过 1 1 1 秒钟，你可以选一些蚂蚁往其父结点走一步，但是要求任意两只蚂蚁都不能在同一个非根结点上。问至少要…...

编程日记 2025/7/10 1:22:35

FPGA Verilog/VHDl 中的锁存latch

目录一、前言二、锁存器定义三、verilog中锁存的产生四、verilog中锁存的影响和消除五、FPGA中的锁存器资源一、前言在做FPGA设计时，我们要求在组合逻辑设计时，case或者if-else条件要完整，否则会产生锁存。本文主要介绍锁存产生的原因和影…...

编程日记 2025/7/10 23:43:30

Ubuntu24.04 配置远程桌面服务

一：安装 sudo apt update sudo apt install vino 二：设置 gsettings set org.gnome.Vino require-encryption false # 关闭加密（某些 VNC 客户端不支持加密） gsettings set org.gnome.Vino prompt-enabled false # 关闭连接…...

编程日记 2025/7/10 15:32:24

相关文章：