Vue3实现动态菜单功能

文章目录

  • 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/55417.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

卸载apt-get 安装的PostgreSQL版本

卸载apt-get 安装的PostgreSQL版本

文章目录 卸载apt-get 安装的PostgreSQL版本查找已安装的PostgreSQL包卸载PostgreSQL：检查并删除残留文件验证卸载 卸载apt-get 安装的PostgreSQL版本 卸载通过apt-get安装的PostgreSQL 就版本，可以按照以下步骤进行。 查找已安装的PostgreSQL包 在卸…
阅读更多...
信号处理快速傅里叶变换(FFT)的学习

信号处理快速傅里叶变换(FFT)的学习

FFT是离散傅立叶变换的快速算法，可以将一个信号变换到频域。有些信号在时域上是很难看出什么特征的，但是如果变换到频域之后，就很容易看出特征了。这就是很多信号分析采用FFT变换的原因。另外，FFT可以将一个信号的频谱提取出来&am…
阅读更多...
StarRocks 中如何做到查询超时(QueryTimeout)

StarRocks 中如何做到查询超时(QueryTimeout)

背景 本文基于 StarRocks 3.1.7 主要是分析以下两种超时设置的方式: SESSION 级别 SET query_timeout 10;SELECT sleep(20);SQL 级别 select /* SET_VAR(query_timeout10) */ sleep(20); 通过本文的分析大致可以了解到在Starrocks的FE端是如何进行Command的交互以及数据流走…
阅读更多...
Java Web 之 Cookie 详解

Java Web 之 Cookie 详解

在 JavaWeb 开发中，Cookie 就像网站给浏览器贴的小纸条，用于记录一些用户信息或状态，方便下次访问时识别用户身份或进行个性化服务。 也可以这么理解： 场景一：想象一下，你去一家咖啡店，店员认…
阅读更多...
webpack信息泄露

webpack信息泄露

先看看webpack中文网给出的解释 webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换、打包或包裹任何资源。 如果未正确配置，会生成一个.map文件，它包含了原始JavaScript代码的映…
阅读更多...
VPN简述

VPN简述

文章目录 VPNVPN基础VPN类型 VPN VPN隧道安全 VPN基础 背景： 在网络传输中，绝大部分数据内容都是明文传输，存在很多安全隐患（窃听、篡改、冒充） 总部、分公司、办事处、出差人员、合作单位等需要访问总部网络资源 Vi…
阅读更多...
富格林：警悟可信经验安全投资

富格林：警悟可信经验安全投资

富格林指出，黄金具有不错的投资价值，一直以来备受投资者的喜爱，近年来大家也纷纷加入现货黄金市场为己增值财富。但是要为投资安全护航的前提，是需要投资者使用合适可信的方法以及掌握相对应的投资技巧。下面富格林将总结以下可信…
阅读更多...
【数学分析笔记】第4章第4节 复合函数求导法则及其应用（1）

【数学分析笔记】第4章第4节 复合函数求导法则及其应用（1）

4. 微分 4.4 复合函数求导法则及其应用 4.4.1 复合函数求导法则 【定理4.4.1】 u g ( x ) ug(x) ug(x)在 x x 0 xx_0 xx0​可导， g ( x 0 ) u ( 0 ) g(x_0)u(0) g(x0​)u(0)， y f ( u ) yf(u) yf(u)在 u u 0 uu_0 uu0​可导，则 y f …
阅读更多...
SpringBoot+Redis+RabbitMQ完成增删改查

SpringBoot+Redis+RabbitMQ完成增删改查

各部分分工职责 RabbitMQ负责添加、修改、删除的异步操作 Redis负责数据的缓存 RabbitMQ里面角色职责简单描述 RabbitMQ里面有几个角色要先分清以及他们的对应关系： 交换机、队列、路由键 交换机和队列是一对多 队列和路由键是多对多 然后就是消息的发送者&…
阅读更多...
课设实验-数据结构-线性表-手机销售

课设实验-数据结构-线性表-手机销售

题目&#xff1a; 代码&#xff1a; #include<stdio.h> #include<string.h> #define MaxSize 10 //定义顺序表最大长度 //定义手机结构体类型 typedef struct {char PMod[10];//手机型号int PPri;//价格int PNum;//库存量 }PhoType; //手机类型 //记录手机的顺序…
阅读更多...
【HTTP（3）】（状态码，https）

【HTTP（3）】（状态码，https）

【认识状态码】 状态码最重要的目的&#xff0c;就是反馈给浏览器:这次请求是否成功&#xff0c;若失败&#xff0c;则出现失败原因 常见状态码: 200:OK&#xff0c;表示成功 404:Not Found&#xff0c;浏览器访问的资源在服务器上没有找到 403:Forbidden&#xff0c;访问被…
阅读更多...
springboot系列--web相关知识探索三

springboot系列--web相关知识探索三

一、前言 web相关知识探索二中研究了请求是如何映射到具体接口&#xff08;方法&#xff09;中的&#xff0c;本次文章主要研究请求中所带的参数是如何映射到接口参数中的&#xff0c;也即请求参数如何与接口参数绑定。主要有四种、分别是注解方式、Servlet API方式、复杂参数、…
阅读更多...
【案例】距离限制模型透明

【案例】距离限制模型透明

开发平台&#xff1a;Unity 2023 开发工具&#xff1a;Unity ShaderGraph   一、效果展示 二、路线图 三、案例分析 核心思路&#xff1a;计算算式&#xff1a;透明值 实际距离 / 最大距离 &#xff08;实际距离 ≤ 最大距离&#xff09;   3.1 说明 | 改变 Alpha 值 在 …
阅读更多...
计算机组成原理之无符号整数的表示和运算

计算机组成原理之无符号整数的表示和运算

无符号整数的表示 无符号整数的表示&#xff1a;无符号整数直接使用其二进制形式表示&#xff0c;所有位都是数值位&#xff0c;没有符号位。例如&#xff0c;一个8位的无符号整数可以表示的范围是从0&#xff08;00000000&#xff09;到255&#xff08;11111111&#xff09;。…
阅读更多...
stm32f103调试，程序与定时器同步设置

stm32f103调试，程序与定时器同步设置

在调试定时器相关代码时&#xff0c;注意到定时器的中断位总是置1&#xff0c;怀疑代码有问题&#xff0c;经过增大定时器的中断时间&#xff0c;发现定时器与代码调试并不同步&#xff0c;这一点对于调试涉及定时器的代码是非常不利的&#xff0c;这里给出keil调试stm32使定时…
阅读更多...
自用Proteus(8.15)常用元器件图示和功能介绍(持续更新...)

自用Proteus(8.15)常用元器件图示和功能介绍(持续更新...)

文章目录 一、 前言二、新建工程&#xff08;以51单片机流水灯为例&#xff09;2.1 打开软件2.2 建立新工程2.3 创建原理图2.4 不创建PCB布版设计2.5 创建成功2.6 添加元器件2.7 原理图放置完成2.8 编写程序&#xff0c;进行仿真2.9 仿真 三、常用元器件图示和功能介绍3.1 元件…
阅读更多...
【回眸】Tessy 单元测试软件使用指南（四）常见报错及解决方案与批量初始化的经验

【回眸】Tessy 单元测试软件使用指南（四）常见报错及解决方案与批量初始化的经验

前言 分析时Tessy的报错 1.fatal error: Tricore/Compilers/Compilers.h: No such file or directory 2.error: #error "Compiler unsupported" 3.warning: invalid suffix on literal;C11 requires a space between literal and string macro 4.error: unknown…
阅读更多...
螺蛳壳里做道场：老破机搭建的私人数据中心---Centos下Docker学习01(环境准备)

螺蛳壳里做道场：老破机搭建的私人数据中心---Centos下Docker学习01(环境准备)

1 准备工作 由于创建数据中心需要安装很多服务器&#xff0c;这些服务器要耗费很所物理物理计算资源、存储资源、网络资源和软件资源&#xff0c;作为穷学生只有几百块的n手笔记本&#xff0c;不可能买十几台服务器来搭建数据中心&#xff0c;也不愿意跑实验室&#xff0c;想躺…
阅读更多...
第十二章--- fixed 和 setprecision 函数、round 函数、进制转换及底层逻辑

第十二章--- fixed 和 setprecision 函数、round 函数、进制转换及底层逻辑

1. 保留几位小数 在C中&#xff0c;如果你想要控制输出的小数点后的位数&#xff0c;可以使用<iomanip>头文件提供的fixed和setprecision函数。这里的fixed用于设置浮点数的输出格式为定点表示法&#xff0c;而setprecision(n)则用来指定小数点后保留的位数。具体用法如…
阅读更多...
文件上传之%00截断（00截断）以及pikachu靶场

文件上传之%00截断（00截断）以及pikachu靶场

pikachu的文件上传和upload-lab的文件上传 目录 mime type类型 getimagesize 第12关%00截断&#xff0c; 第13关0x00截断 差不多了&#xff0c;今天先学文件上传白名单&#xff0c;在网上看了资料&#xff0c;差不多看懂了&#xff0c;但是还有几个地方需要实验一下&#…
阅读更多...
最新文章

Copyright @ 2022~2023