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

Vue3实现动态菜单功能

news 2025/7/8 10:19:59

文章目录

  • 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

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/7/5 1:17:25

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/7/6 6:06:41

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/6/21 7:57:44

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/6/21 16:37:38

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2025/7/5 12:24:36

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/7/5 5:14:22

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/7/4 13:13:42

GAN模式奔溃的探讨论文综述（一）

简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...

编程新知 2025/7/5 21:30:36

【大模型】RankRAG：基于大模型的上下文排序与检索增强生成的统一框架

文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理&#xff1a;检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目&#xff1a;RankRAG&#xff1a;Unifying Context Ranking…...

编程新知 2025/7/7 10:41:46