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

element-plus的面包屑组件el-breadcrumb

面包屑组件主要用来显示当页面路径,以及快速返回之前的页面。
涉及2个组件
el-breadcrumb 和el-breadcrumb-item,

el-breadcrumb的spearator指定item的分隔符

el-breadcrumb-item的to和replace属性和vue-router的一致,需要结合vue_router一起使用

用法如下

<script setup lang="ts">
import { aG } from 'vitest/dist/reporters-LqC_WI4d.js';
import { onMounted, reactive, ref, watch } from 'vue'
import { RouterLink, RouterView,useRoute,useRouter } from 'vue-router'</script><template><div><el-container><el-header></el-header><el-main><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">homepage</el-breadcrumb-item><el-breadcrumb-item :to="{path:'/about'}">a</el-breadcrumb-item><el-breadcrumb-item :to="{path:'/test'}">b</el-breadcrumb-item><el-breadcrumb-item :to="{path:'/test'}">c</el-breadcrumb-item><el-breadcrumb-item :to="{path:'/test'}">d</el-breadcrumb-item></el-breadcrumb><router-view v-slot="{ Component }"><keep-alive ><component :is="Component" :key="$route.fullPath" /></keep-alive></router-view></el-main><el-footer></el-footer></el-container></div></template><style scoped></style>

vue-router配置如下

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ChatRoom from '@/components/ChatRoom.vue';const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: ChatRoom}]
})export default router

在这里插入图片描述
文档链接
https://element-plus.org/zh-CN/component/breadcrumb.html

相关文章:

element-plus的面包屑组件el-breadcrumb

面包屑组件主要用来显示当页面路径&#xff0c;以及快速返回之前的页面。 涉及2个组件 el-breadcrumb 和el-breadcrumb-item, el-breadcrumb的spearator指定item的分隔符 el-breadcrumb-item的to和replace属性和vue-router的一致&#xff0c;需要结合vue_router一起使用 用法…...

推荐几个网盘资源站给大伙,找资源更方便

夸克网盘在当前已然成为极为主流的网盘之一&#xff0c;其功能体验堪称强大&#xff0c;不仅支持在线解压阅读&#xff0c;磁力离线等功能也十分出色。那么&#xff0c;究竟该如何寻找夸克资源呢&#xff1f;下面&#xff0c;我就来为大家分享几个堪称神级的夸克资源网站。 一、…...

【Qt】Qml界面中嵌入C++ Widget窗口

1. 目的 qml做出的界面漂亮&#xff0c;但是执行效率低&#xff0c;一直想找一个方法实现qml中嵌入c界面。现在从网上找到一个方法&#xff0c;简单试了一下貌似可行&#xff0c;分享一下。 2. 显示效果 3. 代码 3.1 工程结构 3.2 pro文件 需要添加widgets > QT quick …...

Python快速入门 —— 第五节:接口开发

第五节:接口开发 目标: 学习使用Flask框架开发简单的Web接口,实现对学生信息的增删改查,通过HTTP请求与应用交互。 内容: Flask简介: Flask是一个轻量级的Python Web框架,使用简单,扩展性强,适合快速开发Web应用。安装Flask: pip install flask创建Flask应用: fr…...

利用secureCRT向虚拟机发送文件(secureCRT安装使用教程)

链接: secureCRT 链接:https://pan.baidu.com/s/1CvNYzoBbLVkyYNFq7hrT0g 提取码:5974 链接: secureCRT安装使用教程 链接:https://pan.baidu.com/s/1Bbi7SqyJBere8G53BCYL5A 提取码:xjw1...

AI杂七杂八系列(1)——工程篇

1. 远程服务器无法登录问题 2. 内存溢出解决方法 3. Padding 4. try...except...处理异常报错 5. view、expand、repeat、transpose、permute和squeeze、unsqueeze的区别 1. 远程服务器无法登录问题 权限可能是root权限&#xff0c;修改权限 用户权限&#xff1a; sudo c…...

学习大数据DAY58 增量抽取数据表

作业 1 SQL 优化的常见写法有哪些 - 面试经常被问 使用索引&#xff1a;合理创建和使用索引是提高查询效率的关键。索引可以加速数据的检 索速度&#xff0c;但是索引也会占用额外的存储空间&#xff0c;并且在插入、删除和更新操作时会 有额外的开销。 避免全表扫描&…...

HTTPTomcat

HTTP&Tomcat&Servlet 今日目标&#xff1a; 了解JavaWeb开发的技术栈理解HTTP协议和HTTP请求与响应数据的格式掌握Tomcat的使用掌握在IDEA中使用Tomcat插件 1&#xff0c;Web概述 1.1 Web和JavaWeb的概念 Web是全球广域网&#xff0c;也称为万维网(www)&#xff0c;…...

Python数据分析-Matplotlib快速入门

一、pyplot 二、绘图 1.绘制x和y的点 2.无线绘图 3.多点 4.默认x点 三、标记 1.标记 2.参考 3.格式化字符串 4.尺寸 5.颜色 四、线条 1.线形 两个都是设置虚线 2.更短的语法 3.线参考 4.线条颜色 5.线宽度 6.多条线 也可以 五、标签 1.为绘图创建标签 2.为绘图设置标题 3…...

重塑在线软件开发新纪元:集成高效安全特性,深度解析与评估支持浏览器在线编程的系统架构设计

目录 案例 【题目】 【问题 1】(13 分) 【问题 2】(12 分) 【答案】 【问题 1】解析 【问题 2】解析 相关推荐 案例 阅读以下关于软件架构设计与评估的叙述&#xff0c;回答问题1和问题2。 【题目】 某公司拟开发一套在线软件开发系统&#xff0c;支持用户通过浏览器…...

【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析

【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析 系列文章汇总:《鸿蒙OH-v5.0源码分析之 Uboot+Kernel 部分】000 - 文章链接汇总》 本文链接:《【鸿蒙OH-v5.0源码分析之 Linux Kernel 部分】003 - vmlinux.lds 链接脚本文件源码分析》 …...

MongoDB实现高级RAG:Parent-Document检索技术详解

MongoDB实现高级RAG&#xff1a;Parent-Document检索技术详解 引言 在人工智能和自然语言处理领域&#xff0c;检索增强生成(Retrieval-Augmented Generation, RAG)技术正在迅速发展。本文将介绍一种更高级的RAG实现方式&#xff1a;Parent-Document检索。我们将探讨如何使用…...

胡学乱想----前端知识点(css色彩)

1. margin 属性 简写 margin 属性有两个值时,它将 margin-top 和 margin-bottom 设置为第一个值,并将 margin-left 和 margin-right 设置为第二个值 .marker {width: 200px;height: 25px;background-color: red;margin: 10px auto; }2. rgb 属性 CSS 的 rgb 函数接收红色…...

GEE 案例——利用MODIS数据和NDWI指数进行美国五大湖水体计算和时序分析(直方图统计和面积统计)

目录 简介 MODIS数据 代码 结果 简介 利用MODIS数据和NDWI指数进行水体计算和时序分析(直方图统计和面积统计),这里我们统计了2001-2023年的美国五大湖的水域面积变化情况。 MODIS数据 MODIS/061/MOD09A1数据是由美国宇航局(NASA)的Moderate Resolution Imaging Spe…...

【jvm】记一次hive堆heap内存溢出的排查

先看下java的内存模型 监控jvm工具&#xff1a;visualVM 摘录一下内容&#xff1a; 由c开发的jvm&#xff0c;它巧妙地设计了java的设计理念——即万物皆对象。并设计了这些对象应该如何存储&#xff0c;如何调用&#xff0c;并通过不断迭代设计让对象的存储和回收&#xff0…...

编译运行 webAssembly(wasm)

环境准备&#xff1a; lunix下docker 参考https://hub.docker.com/r/emscripten/emsdk 拉编译环境 docker pull emscripten/emsdk 编译 随便找个目录&#xff0c;敲下面命令&#xff0c;编译一个webAssembly 程序 # create helloworld.cpp cat << EOF > hellowo…...

Linux bash 关联数组

目录 一. 关联数组定义二. 访问关联数组三. 元素的添加与删除四. 键值对的获取与遍历五. 实际应用5.1 读取封装配置文件内容5.2 收集系统信息 一. 关联数组定义 从 Bash 4.0 开始&#xff0c;Bash 支持关联数组。关联数组允许你将键和值配对&#xff0c;并通过键来访问值&…...

选择排序

一&#xff1a;基本思想 每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完 。 解释&#xff1a;就是不断的找到最小的放在最左面&#xff0c;然后缩短数组&#xff0c;…...

SQL数据库(MySQL)

一、在Ubuntu系统下安装MySQL数据库 1、更新软件源&#xff0c;在确保ubuntu系统能正常上网的情况下执行以下命令 sudo apt-get update 2、安装MySQL数据库及相关软件包 # 安装过程中设置root用户的密码 123456 sudo apt-get install mysql-server ​ # 安装访问数据库的客…...

在MindSearch中使用SiliconCloud:全面指南**

随着硅基流动&#xff08;SiliconFlow&#xff09;提供的InternLM2.5-7B-Chat服务的免费开放&#xff0c;我们迎来了MindSearch部署的全新篇章。这一服务的免费提供&#xff0c;不仅极大地降低了部署门槛&#xff0c;还为MindSearch的使用者带来了纯CPU版本的便利。本文将为您详…...

A89306电机控制器驱动库:SPI寄存器级控制与FOC系统集成

1. A89306电机控制器驱动库技术解析与工程实践1.1 芯片定位与系统角色A89306是由Allegro MicroSystems推出的高集成度三相无刷直流&#xff08;BLDC&#xff09;电机控制器专用IC&#xff0c;面向中高端工业驱动与精密运动控制场景。该芯片并非通用MCU&#xff0c;而是集成了栅…...

Linux IO调度器详解与性能优化指南

1. Linux IO调度器概述作为一名长期从事Linux系统调优的工程师&#xff0c;我经常需要面对磁盘IO性能优化的问题。今天我想和大家深入探讨Linux内核中的四大IO调度算法&#xff0c;这些算法直接影响着系统的IO性能表现。现代计算机系统中&#xff0c;磁盘IO往往是性能瓶颈所在。…...

51单片机(二) --- GPIO + 中断

一、GPIO 通用输入输出口GPIO&#xff08;General Purpose Input Output&#xff09;即通用目的输入输出口&#xff0c;是 51 单片机与外部设备进行数据交互的核心通道&#xff0c;51 单片机的 P0、P1、P2、P3 四组口均为 GPIO 口。与入门阶段仅用到的简单电平输出不同&#xf…...

告别繁琐手工操作:工资条生成器使用指南

对于许多财务人员来说&#xff0c;每月制作工资条都是一项让人头疼的工作。 手工制作不仅要花费大量时间&#xff0c;还容易出现各种错误&#xff0c;影响工作效率和准确性。 今天&#xff0c;我们就来详细介绍一款能够彻底改变这种状况的工具——工资条生成器。 工资条生成…...

Scratch二次开发实战:如何按需“阉割”菜单栏功能?从关闭语言切换、主题到隐藏教程按钮

Scratch教学环境定制指南&#xff1a;精准控制菜单栏功能的艺术 1. 为什么需要定制Scratch界面&#xff1f; 在少儿编程教育领域&#xff0c;Scratch作为全球最受欢迎的图形化编程工具之一&#xff0c;其默认界面设计面向的是广泛年龄段的国际用户。然而在实际教学场景中&#…...

OpCore-Simplify:黑苹果配置的智能革命——从手动调试到自动化生成的转变

OpCore-Simplify&#xff1a;黑苹果配置的智能革命——从手动调试到自动化生成的转变 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 传统黑苹果配置需…...

如何用ESP32打造你的终极智能网络收音机:YoRadio完全指南

如何用ESP32打造你的终极智能网络收音机&#xff1a;YoRadio完全指南 【免费下载链接】yoradio Web-radio based on ESP32-audioI2S library 项目地址: https://gitcode.com/GitHub_Trending/yo/yoradio ESP32 YoRadio是一款基于ESP32的开源智能网络收音机项目&#xff…...

直流电机双闭环调速控制系统仿真模型 转速电流双闭环PI控制 Matlab/Simulink仿真模型 带报告

直流电机双闭环调速控制系统仿真模型 转速电流双闭环PI控制 Matlab/Simulink仿真模型 带报告在 Simulink 里搭建直流电机双闭环调速系统&#xff0c;而是通过连接模块来实现。这段代码会自动计算 PI 控制器的参数&#xff0c;DC_Motor_Dual_Loop 的仿真模型。 &#x1f6e0;️ …...

AutoCAD转SolidWorks必看:用装配体功能优化树莓派小车结构的5个技巧

AutoCAD转SolidWorks必看&#xff1a;用装配体功能优化树莓派小车结构的5个技巧 从AutoCAD转向SolidWorks的设计师常会遇到一个关键挑战&#xff1a;如何将二维绘图思维转化为三维装配思维。上周一位机械工程师向我展示了他的树莓派小车AutoCAD图纸——虽然二维尺寸精确到毫米…...

【西瓜带你学设计模式 | 第十二期 - 装饰器模式】装饰器模式 —— 动态叠加功能实现、优缺点与适用场景

文章目录前言1. 装饰器模式是什么&#xff1f;2. 装饰器模式解决什么问题&#xff1f;3. 实现步骤4. 静态结构4.1 抽象组件&#xff1a;Coffee&#xff08;统一接口&#xff09;4.2 具体组件&#xff1a;SimpleCoffee&#xff08;基础咖啡&#xff09;4.3 装饰器抽象类&#xf…...