从0到1完成一个Vue后台管理项目(九、引入Breadcrumb面包屑,更改bug)

news2024/11/15 7:39:28

往期

从0到1完成一个Vue后台管理项目(一、创建项目)

从0到1完成一个Vue后台管理项目(二、使用element-ui)

从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库)

从0到1完成一个Vue后台管理项目(四、引入axios、配置路由)

从0到1完成一个Vue后台管理项目(五、登录页(表单校验的使用和封装))

从0到1完成一个Vue后台管理项目(五、登录页,mock,token,axios封装)

从0到1完成一个Vue后台管理项目(六、404页)

从0到1完成一个Vue后台管理项目(七、Header、Footer、页面布局)

从0到1完成一个Vue后台管理项目(八、Menu改造完善、子组件创建、配置路由)

使用面包屑

我们想给我们的导航加一个面包屑的效果
在这里插入图片描述

在common下建立Breadcrumb.vue

在这里插入图片描述
Home页使用
在这里插入图片描述

面包屑改造

在这里插入图片描述

遇到的bug

点击菜单选项,所有子菜单全展开
原因以及解决方法

这是由子菜单项的index属性引起的,但我们为每个子菜单项的index属性添加相同的值时就会出现这种情况。所以为每个子菜单项添加不同的index属性值就可解决

在这里插入图片描述

调整Home样式

在这里插入图片描述
完成

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ansible(第四天)

三:编写playbook 1.Ansible playbook 临时命令可以作为一次性对一组主机运行简单的任务。不过,若要真正发挥Ansible的力量,需要了解如 何使用playbook可以轻松重复的方式对一组主机执行多项复杂的任务。 play是针对对清单中选定的主机运行…

汽车电子系统网络安全组织管理

声明 本文是学习GB-T 38628-2020 信息安全技术 汽车电子系统网络安全指南. 下载地址 http://github5.com/view/764而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 汽车电子系统网络安全组织管理 6.1 组织机构设置 组织应高度重视网络安全&#xff0c…

基于Prometheus+Grafana搭建监控平台(Windows/Linux环境exporter部署)

1. 介绍 1.1 Prometheus是什么?Prometheus(普罗米修斯)是一个最初在SoundCloud上构建的监控系统。自2012年成为社区开源项目,拥有非常活跃的开发人员和用户社区。为强调开源及独立维护,Prometheus于2016年加入云原生云计算基金会…

【从零开始学习深度学习】43. 算法优化之Adam算法【RMSProp算法与动量法的结合】介绍及其Pytorch实现

Adam算法是在RMSProp算法基础上对小批量随机梯度也做了指数加权移动平均 【可以看做是RMSProp算法与动量法的结合】。 目录1. Adam算法介绍2. 从零实现Adam算法3. Pytorch简洁实现Adam算法--optim.Adam总结1. Adam算法介绍 Adam算法使用了动量变量vt\boldsymbol{v}_tvt​和RMS…

LVGL官方UI设计软件——SquareLine Studio micropython 使用简单测评

经常去LVGL官网逛的人一定都知道这个软件,作为官方的亲儿子,使用体验如何呢,我简单体验了一周左右,简单做个测评,本测评仅代表我个人意见,并且仅限micropython的使用体验! 首先是价格&#xff0…

TCP报文段(segment)首部格式

TCP传给IP的数据单元称作TCP报文段或简称为TCP段(TCP segment)。 IP传给链路层的数据单元称作IP数据报(IP datagram)。 通过以太网传输的比特流称作帧(Frame)。 逐层封装: 源端口号发送端端口号,字段长16位(2字节&…

计算机网络第二章

物理层的基本概念物理层的作用:物理层解决如何在连接各种计算机的传输媒体上传输数据比特流,而不是指具体的传输媒体。物理层的主要任务:确定与传输媒体接口有关的一些特性 🔜本质:定义一些固定标准物理层的四大特性&a…

Word怎么转PDF?8个Word转PDF工具分析

Word 到 PDF 转换工具是用于将 Microsoft Word(DOC 或 DOCX)文档转换为 PDF 格式的程序。根据操作模式,它可以是在线或离线软件。当然,考虑到市场上充斥着此类工具,获得最好的 DOCX 到 PDF 转换器可能会让人头疼。正是…

MySQL基础篇第12章(MySQL数据类型)

1. MySQL中的数据类型 常见的数据类型的属性: 2. 整数介绍 2.1 类型介绍 整数类型一共有 5 种,包括 TINYINT、SMALLINT、MEDIUMINT、INT(INTEGER)和 BIGINT。 它们的区别如下表所示: 2.2 可选属性 整数类型的可选…

javaweb-异步请求AjaxaxiosJSON

1,Ajax 1.1 概述 AJAX (Asynchronous JavaScript And XML):异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML,JavaScript 表明该技术和前端相关;XML 是指以此进行数据交换。而这两个我们之前都学习过。 ####…

JavaWeb基础——从入门到超神(笔记,持续更新)

day00综述 需要学习SpringBoot,但是JavaWeb是基础,来补一下 JavaWeb就是将数据库中的数据用好看的样式在网页上呈现出来 day01MySQL基础 接下来就是MySQL的安装什么的 mysqld --initialize-insecure mysqld -install net start mysql至此我的电脑上已…

【蓝桥杯-筑基篇】基础入门

🍓系列专栏:蓝桥杯 🍉个人主页:个人主页 目录 1.数位翻转 2.三个数求最大值的写法 3.两数交换的几种方法 4.身份证第18位合法性校验 5.黑洞数(陷阱数) 1.数位翻转 如: 整数 12345 返回结果为整数: 54321 当第一次看到这个题…

【零基础】学python数据结构与算法笔记7

文章目录前言41.查找排序部分习题42.查找排序习题143.查找排序习题244.查找排序习题345.查找排序习题4总结前言 学习python数据结构与算法,学习常用的算法, b站学习链接 41.查找排序部分习题 选题部分来自leetcode 42.查找排序习题1 242. 有效的…

蓝桥杯备赛Day6——链表

目录 数组的缺点 链表 单向链表 双向链表 Python链表的实现 手写链表 数组的缺点 1)需要占用连续的空间 若某个数组很大,可能没有这么大的连续空间给它用。 2〉不方便删除和插入 例如删除数组中间的一个数据,需要把后面所有的数据往前挪填补这个空…

CODESYS开发教程7-字符串及其基本操作

今天继续我们的小白教程,老鸟就不要在这浪费时间了😊。 前面一期我们介绍了CODESYS的关键字及变量。这一期主要介绍CODESYS的字符串类型,以及如何利用字符串操作函数来实现字符串的查找、插入、替换、连接、分割、删除等相关操作。注意本文介…

Realsense相机的RGB与depth图像的对齐

第三部分 将RGB图像和Depth图像对齐 文章目录第三部分 将RGB图像和Depth图像对齐前言一、创建对齐的cpp文件1.用vim创建C文件二、使用CMake构建C工程1.创建并编写CMakeList.txt文件2.编译CMakeLists.txt总结前言 将RGB图像和深度图像对齐有两种方式,一种是将深度图…

音视频开发-第一章-H264编解码

目录参考原文一、概述二、封装格式2.1、视频文件封装格式2.2、音视频编码方式2.2.1、视频编码方式2.2.2、音频编码方式三、H264相关概念3.1、H264基本单元3.2、帧类型3.3、GOP(画面组)3.4、IDR 帧四、H264压缩方式4.1、H264压缩方式4.2、H264压缩方式说明五、H264分层结构5.1、…

【websocket】前端websocket 实时通信

前端websocket 实时通信 文章目录前端websocket 实时通信什么是websocket为什么传统的http协议不能做到websocket实现的功能websocket前后端所用到的事件对比WebSocket.readyState代码什么是websocket websocket是HTML5开始提供的一种网络通信协议,它诞生的目的是在…

60条小妙招帮助你开车更省油

1、把备胎和千斤顶,工具,都放在家里,不跑长途不带这些,省油。2、说明书上说92号或以上标号,那么加95号油省油。如果是95或以上的标注,那就加98省油。3、驾驶中尽量减少急加速 急刹车,省油。4、驾…

Java——多态

好久不见啊,兄弟们!!这不将近期末考试了吗,阿涛平日里课听的不多,所以最近都在疯狂补课,祖宗之法也可变,阿涛的学校终于不是二十周校历了!!希望从今往后我们的生活都能够…