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，一经查实，立即删除！

相关文章

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

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

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

webpack信息泄露

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

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

题目&#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 值 在 …
阅读更多...
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;想躺…
阅读更多...
文件上传之%00截断（00截断）以及pikachu靶场

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

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

SpringBoot整合异步任务执行

同步任务&#xff1a; 同步任务是在单线程中按顺序执行&#xff0c;每次只有一个任务在执行&#xff0c;不会引发线程安全和数据一致性等 并发问题 同步任务需要等待任务执行完成后才能执行下一个任务&#xff0c;无法同时处理多个任务&#xff0c;响应慢&#xff0c;影响…
阅读更多...
VirtualBox+Vagrant快速搭建Centos7系统【最新详细教程】

VirtualBox+Vagrant快速搭建Centos7系统【最新详细教程】

VirtualBoxVagrant快速搭建Centos7系统 &#x1f4d6;1.安装VirtualBox✅下载VirtualBox✅安装 &#x1f4d6;2.安装Vagrant✅下载Vagrant✅安装 &#x1f4d6;3.搭建Centos7系✅初始化Vagrantfile文件生成✅启动Vagrantfile文件✅解决 vagrant up下载太慢的问题✅配置网络ip地…
阅读更多...
咸鱼sign逆向分析与爬虫实现

咸鱼sign逆向分析与爬虫实现

目标&#xff1a;&#x1f41f;的搜索商品接口 这个站异步有点多&#xff0c;好在代码没什么混淆。加密的sign值我们可以通过搜索找到位置 sign值通过k赋值&#xff0c;k则是字符串拼接后传入i函数加密 除了开头的aff…&#xff0c;后面的都是明文没什么好说的&#xff0c;我…
阅读更多...
SysML案例-电磁轨道炮

SysML案例-电磁轨道炮

DDD领域驱动设计批评文集>> 《软件方法》强化自测题集>> 《软件方法》各章合集>> 图片示例摘自intercax.com&#xff0c;作者是Intercax公司总裁Dirk Zwemer博士。
阅读更多...
C题（六） 1到 100 的所有整数中出现多少个数字9

C题（六） 1到 100 的所有整数中出现多少个数字9

场景&#xff1a;编写程序数一下 1到 100 的所有整数中出现多少个数字9 控制循环的变量不可以随意改动&#xff01;&#xff01;&#xff01; 控制循环的变量不可以随意改动&#xff01;&#xff01;&#xff01; 控制循环的变量不可以随意改动&#xff01;&#xff01;&#x…
阅读更多...
看480p、720p、1080p、2k、4k、视频一般需要多大带宽呢？

看480p、720p、1080p、2k、4k、视频一般需要多大带宽呢？

看视频都喜欢看高清&#xff0c;那么一般来说看电影不卡顿需要多大带宽呢&#xff1f; 以4K为例&#xff0c;这里引用一位网友的回答&#xff1a;“视频分辨率4092*2160&#xff0c;每个像素用红蓝绿三个256色(8bit)的数据表示&#xff0c;视频帧数为60fps&#xff0c;那么一秒…
阅读更多...
数据结构--二叉树的顺序实现（堆实现）

数据结构--二叉树的顺序实现（堆实现）

引言 在计算机科学中&#xff0c;二叉树是一种重要的数据结构&#xff0c;广泛应用于各种算法和程序设计中。本文将探讨二叉树的顺序实现&#xff0c;特别是堆的实现方式。 一、树 1.1树的概念与结构 树是⼀种⾮线性的数据结构&#xff0c;它是由 n(n>0) 个有限结点组成…
阅读更多...
C#串口温度读取

C#串口温度读取

背景&#xff1a;每天学点&#xff0c;坚持 要安装好虚拟串口和modbus poll&#xff0c;方便调试&#xff08;相关资源在文末&#xff0c;也可以私信找我要&#xff09; 传感器部分使用的是达林科技的DL11B-MC-D1&#xff0c;当时42软妹币买的&#xff08;官网上面有这个传感…
阅读更多...
若依--文件上传前端

若依--文件上传前端

前端 ry的前端文件上传单独写了一个FileUpload.Vue文件。在main.js中进行了全局的注册&#xff0c;可以在页面中直接使用文件上传的组件。全局导入 在main.js中 import 组件名称 from /components/FileUpLoadapp.compoent(组件名称) //全局挂载组件在项目中使用 组件命令 中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023