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

Vue3实现动态菜单功能

news 2026/4/2 8:49:06

文章目录

  • 0.效果演示
  • 1.搭建Vue3项目
    • 1.1 vite 脚手架创建 Vue3 项目
    • 1.2 设置文件别名
    • 1.3 安装配置 element-plus
    • 1.4 安装配置路由
  • 2.登录页面
  • 3.后台管理页面
    • 3.1 搭建后台框架
    • 3.2 左侧菜单栏
    • 3.3 header 用户信息
    • 3.4 主要内容
    • 3.5 footer
  • 4.配置静态路由
  • 5.记录激活菜单
    • 5.1 el-menu 绑定 default-active 属性
    • 5.2 菜单添加点击事件
    • 5.3 初始化激活菜单
  • 6.动态路由
    • 6.1 登录成功存储数据
    • 6.2 路由导航守卫动态配置路由
    • 6.3 解决刷新页面，页面空白的问题
  • 7.完整代码

主要步骤：
在这里插入图片描述

0.效果演示

在这里插入图片描述

1.搭建Vue3项目

1.1 vite 脚手架创建 Vue3 项目

npm create vite@latest vue3-zhifou -- --template vue

代码编辑器进入刚创建的项目文件夹里面

#安装依赖npm

相关文章：

Vue3实现动态菜单功能

文章目录 0.效果演示1.搭建Vue3项目1.1 vite 脚手架创建 Vue3 项目1.2 设置文件别名1.3 安装配置 element-plus1.4 安装配置路由2.登录页面3.后台管理页面3.1 搭建后台框架3.2 左侧菜单栏3.3 header 用户信息3.4 主要内容3.5 footer4.配置静态路由5.记录激活菜单5.1 el-menu 绑…...

编程日记 2024/10/8 21:56:21

Qt+VS2019+大恒相机相机回调方式总结

一、前言 大恒驱动安装完成后，在安装目录有SDK调用文档，里面有更详细的调用介绍，此文档对近期做的Demo做一个回顾性总结。 二、调用流程概述 三、针对性内容介绍： 1. 在执行相机操作之前，需要先执行此代码&#xff1…...

编程日记 2024/10/8 21:54:19

Python库pandas之六

Python库pandas之六 输入/输出read_sql函数应用实列 输入/输出 read_sql 函数 词法&#xff1a;pandas.read_sql(sql, con, index_colNone, coerce_floatTrue, paramsNone, parse_datesNone, columnsNone, chunksizeNone, dtype_backend<no_default>, dtypeNone) rea…...

编程日记 2024/10/8 21:53:14

[C++]使用纯opencv部署yolov11-seg实例分割onnx模型

【算法介绍】 在C中使用纯OpenCV部署YOLOv11-seg进行实例分割是一项具有挑战性的任务&#xff0c;因为YOLOv11通常是用PyTorch等深度学习框架实现的&#xff0c;而OpenCV本身并不直接支持加载和运行PyTorch模型。然而&#xff0c;可以通过一些间接的方法来实现这一目标&#x…...

编程日记 2024/10/8 21:52:12

PAT甲级-1122 Hamiltonian Cycle

题目 题目大意 给定一个图和几组顶点&#xff0c;判断每组顶点是否能构成一个哈密顿回路。 知识点 哈密顿回路满足几点要求&#xff1a;构成一个封闭环&#xff0c;并且经过所有顶点&#xff0c;每个顶点经过一次。 即满足第一个顶点值和最后一个顶点值相等&#xff1b;只有…...

编程日记 2024/10/8 21:51:10

Java 插入排序

插入排序&#xff08;Insertion Sort&#xff09;是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。以下是插入排序的Java实现&#xff1a; public class Inserti…...

编程日记 2024/10/8 21:49:05

随机掉落的项目足迹：Vue3中vite.config.ts配置代理服务器解决跨域问题

跨域问题产生的原因&#xff1a;浏览器同源策略 后面的通俗解释小标题下的内容是便于大家理解同源策略和跨域问题。 而同源策略和跨域问题这两个小标题下的内容虽然比较专业不容易阅读&#xff0c;但是还是建议大家花时间理解并记忆&#xff0c;因为这是前端面试中的常考点。…...

编程日记 2024/10/8 21:46:46

C++笔记之标准库和boost库中bind占位符_1的写法差异

C++笔记之标准库和boost库中bind占位符_1的写法差异 code review! 参考博文： C++新特性探究(十五)：bind 在C++中，_1 和 std::placeholders::_1 都用于表示占位符，但它们有不同的上下文：...

编程日记 2024/10/8 21:42:42

二分查找

文章目录 1.算法思想2.代码实现(1)循环实现(2)递归实现 3.题目练习 1.算法思想 二分查找(折半查找)&#xff1a;有序数组(升序或降序&#xff0c;可以不连续)&#xff0c;每次缩小一半的区间。 时间复杂度&#xff1a;O(log n) 空间复杂度&#xff1a;循环实现是 O(1)&#xf…...

编程日记 2024/10/8 21:39:39

关注、取关、Redis实现共同关注、 博客推送与分页查询

Resourceprivate StringRedisTemplate stringRedisTemplate;Resourceprivate IUserService userService;Overridepublic Result follow(Long followUserId, Boolean isFollow) {//1.获取登陆的用户Long userId UserHolder.getUser().getId();//1.判断是关注还是取关if(isFollo…...

编程日记 2024/10/8 21:38:35

专业高清录屏软件！Mirillis Action v4.40 解锁版下载，小白看了都会的安装方法

Mirillis Action!&#xff08;暗神屏幕录制软件&#xff09;专业高清屏幕录像软件&#xff0c;被誉为游戏视频三大神器之一。这款屏幕录制软件和游戏录制软件&#xff0c;拥有三大硬件加速技术&#xff0c;支持以超高清视频画质录制桌面和实况直播&#xff0c;超清视频画质&…...

编程日记 2024/10/8 21:33:20

胤娲科技：AI重塑会议——灵动未来，会议新纪元

你是否曾经历过这样的会议场景&#xff1a;会议纪要不准确&#xff0c;人名张冠李戴&#xff1b;错过会议&#xff0c;却无从回顾关键内容&#xff1b;会议效率低下&#xff0c;时间白白流逝&#xff1f; 这些问题仿佛成了现代会议的“顽疾”。然而&#xff0c;随着AI技术的飞速…...

编程日记 2024/10/8 21:31:17

Python画笔案例-080 绘制 颜色亮度测试

1、绘制 颜色亮度测试 通过 python 的turtle 库绘制 颜色亮度测试，如下图： 2、实现代码 绘制 颜色亮度测试，以下为实现代码： """颜色亮度测试.py本程序需要coloradd模块支持,请在cmd窗口,即命令提示符下输入pip install coloradd进行安装。本程序演示brig…...

编程日记 2024/10/8 21:30:16

MATLAB工具库：数据统计分析工具MvCAT、MhAST等

MATLAB工具库&#xff1a;数据统计分析工具MvCAT、MhAST等 工具1&#xff1a;Multivariate Copula Analysis Toolbox (MvCAT)MATLAB中运行 工具2&#xff1a;Multi-hazard Scenario Analysis Toolbox (MhAST) 参考 The University of California-软件库-Software 工具1&#xf…...

编程日记 2024/10/8 21:27:13

角色动画——RootMotion全解

1. Unity(2022)的应用 由Animtor组件控制 在Animation Clip下可进行详细设置 ​ 官方文档的介绍(Animation选项卡 - Unity 手册) 上述动画类型在Rag选项卡中设置: Rig 选项卡上的设置定义了 Unity 如何将变形体映射到导入模型中的网格&#xff0c;以便能够将其动画化。 对于人…...

编程日记 2024/10/8 21:25:08

加密软件的桌面管理系统有什么？

1、IT资源管控&#xff1a;协助企事业单位管理者对内部计算机、宽带、打印、外围设备等IT资源进行管控&#xff0c;提高IT资源利用率。 2、规范内网行为&#xff1a;规范员工的计算机使用行为、网络使用行为、IT资产使用行为、设备使用行为 等&#xff0c;令员工活动在合规范围…...

编程日记 2024/10/8 21:24:07

【stm32】寄存器（stm32技术手册下载链接）

1、资料下载 RM0008_STM32F101xx,STM32F102xx,STM32F103xx,STM32F105xx和STM32F107xx单片机参考手册 | STMCU中文官网 2、代码 设置PB7 //设置PB7 #define SDA_IN() {GPIOB->CRL&0X0FFFFFFF;GPIOB->CRL|(u32)8<<28;} #define SDA_OUT() {GPIOB->…...

编程日记 2024/10/8 21:17:58

django的路由分发

前言&#xff1a; 在前面我们已经学习了基础的Django了&#xff0c;今天我们将继续学习&#xff0c;我们今天学习的是路由分发&#xff1a; 路由分发是Web框架中的一个核心概念&#xff0c;它指的是将不同的URL请求映射到对应的处理函数&#xff08;视图&#xff09;的过程。…...

编程日记 2024/10/8 21:15:56

《贪吃蛇小游戏 1.0》源码

好久不见&#xff01; 终于搞好了简易版贪吃蛇小游戏&#xff08;C语言版&#xff09;&#xff0c;邀请你来玩一下~ 目录 Snake.h Snake.c test.c Snake.h #include<stdio.h> #include<windows.h> #include<stdbool.h> #include<stdlib.h> #inclu…...

编程日记 2024/10/8 21:13:54

初入网络学习第一篇

引言 不磨磨唧唧&#xff0c;跟着学就好了&#xff0c;这个是我个人整理的学习内容梳理&#xff0c;学完百分百有收获。 1、使用的网络平台:eNSP 下载方法以及内容参考这篇文章 华为 eNSP 模拟器安装教程&#xff08;内含下载地址&#xff09;_ensp下载-CSDN博客https://b…...

编程日记 2024/10/8 21:12:53

德希科技在线污泥浓度传感器

一、应用场景与产品定位 污泥浓度是污水处理生化系统稳定运行的关键控制指标&#xff0c;研发人员针对市政污水、工业废水处理厂曝气池、二沉池、氧化沟等场景的监测需求&#xff0c;推出散射光法在线污泥浓度传感器。设备以高稳定性、强抗干扰、长寿命的特性&#xff0c;适配…...

编程新知 2026/4/2 8:40:10

4个维度解析YetAnotherKeyDisplayer：开源实时按键可视化工具全指南

4个维度解析YetAnotherKeyDisplayer&#xff1a;开源实时按键可视化工具全指南 【免费下载链接】YetAnotherKeyDisplayer The application for displaying pressed keys of the keyboard 项目地址: https://gitcode.com/gh_mirrors/ye/YetAnotherKeyDisplayer YetAnothe…...

编程新知 2026/4/2 8:24:03

一个insert()调用背后的921行C++——OpenCV Delaunay三角剖分源码全解析

看这段代码： Subdiv2D subdiv(Rect(0, 0, 600, 600)); subdiv.insert(Point2f...

编程新知 2026/4/2 6:48:40

告别传统知识蒸馏：用‘逆向蒸馏’在MVTec数据集上实现98.5%的异常检测精度

逆向蒸馏&#xff1a;工业质检场景下的异常检测新范式 在工业质检领域&#xff0c;异常检测一直是计算机视觉技术落地的核心挑战之一。传统方法往往受限于样本不平衡、缺陷类型多样等问题&#xff0c;而基于深度学习的方案又面临标注成本高、泛化能力不足的困境。CVPR 2022提出…...

编程新知 2026/4/2 6:10:24

Swashbuckle.AspNetCore 生产环境部署指南：安全配置API文档的终极方案

Swashbuckle.AspNetCore 生产环境部署指南&#xff1a;安全配置API文档的终极方案 【免费下载链接】Swashbuckle.AspNetCore Swagger tools for documenting APIs built on ASP.NET Core 项目地址: https://gitcode.com/gh_mirrors/sw/Swashbuckle.AspNetCore Swashbuck…...

编程新知 2026/4/2 5:33:49

【数据结构与算法】第19篇：树与二叉树的基础概念

一、什么是树1.1 树的定义树是 n&#xff08;n ≥ 0&#xff09;个节点的有限集合。当 n 0 时称为空树。任意非空树满足&#xff1a;有且仅有一个根节点其余节点可分为 m 个互不相交的子树现实中的例子&#xff1a;文件系统、公司组织架构、网页DOM树。1.2 树的术语画一棵树来…...

编程新知 2026/4/2 3:52:33

无片外电容的LDO电路设计手册：完整IP现成电路，包含过温与过流保护、带隙与BUFFER，性能...

无片外电容LDO电路设计 完整IP现成电路&#xff0c;具有过温保护和过流保护&#xff0c;带隙&#xff0c;BUFFER都有 性能指标已流片验证 同时有相关文献、各模块电路功能分析简化计算笔记&#xff0c;适合学习入门不适合纵向可以附赠一些自己学习时觉得比较有帮助的资料。 有好…...

编程新知 2026/4/2 3:13:30

油气勘探数据可视化流程图制作

一、前言 油气勘探属于高投入、高风险、数据密集型行业&#xff0c;勘探过程中会产生地震数据、测井数据、地质录井数据、试油试采数据等多维度海量信息。数据可视化流程图能够将复杂的勘探流程、数据流转逻辑、分析决策路径进行结构化呈现&#xff0c;既便于团队内部技术交底…...

编程新知 2026/4/2 2:43:04

MusePublic助力Java开发者：SpringBoot集成指南

MusePublic助力Java开发者&#xff1a;SpringBoot集成指南 1. 为什么Java团队需要MusePublic能力 最近帮一家电商公司做推荐系统升级时&#xff0c;技术负责人跟我聊起一个现实问题&#xff1a;他们用传统协同过滤算法生成的商品推荐列表&#xff0c;点击率已经连续三个季度停…...

编程新知 2026/4/2 2:24:46

NVIDIA Profile Inspector完全掌握：从问题诊断到性能优化的效率提升指南

NVIDIA Profile Inspector完全掌握&#xff1a;从问题诊断到性能优化的效率提升指南 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 许多玩家和创作者拥有高性能NVIDIA显卡&#xff0c;却因配置不当无法…...

编程新知 2026/4/2 1:08:01