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

elementplus的el-tabs路由式

news 来源：原创 2025/7/4 5:44:50

在使用 Element Plus 的 el-tabs 组件，实现路由式的切换（即点击标签页来切换不同的路由页面）。下面是一个基于 Vue 3 和 Element Plus 实现路由式 el-tabs 的基本步骤和示例。

步骤 1: 安装必要的库

在vue3项目安装 Vue Router 和 Element Plus。

src/main.js:

import { createApp } from 'vue';
import App from './components/el-tabs.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

步骤 2: 设置 Vue Router

设置 Vue Router。例如，创建一个简单的路由配置，比如有两个页面：TabOne.vue 和 TabTwo.vue。

src/components/TabOne.vue:

<template><div class="hello"><div style="color: red">这是配置管理子组件TabOne</div></div>
</template>
<style scoped >
.hello{width: 100%;height: 600px;display: flex;justify-content: center;align-items: center;background-color: #CAE1FF;
}
</style>

src/components/TabTwo.vue:

<template><div class="hello"><div style="color: red">这是配置管理子组件TabTwo</div></div>
</template><style scoped >
.hello{width: 100%;height: 600px;display: flex;justify-content: center;align-items: center;background-color: #CAE1FF;
}
</style>

src/components/el-tabs.vue:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import TabOne from '../components/TabOne.vue';
import TabTwo from '../components/TabTwo.vue';const routes = [{ path: '/tab-one', name: 'TabOne', component: TabOne },{ path: '/tab-two', name: 'Profile', component: TabTwo },];const router = createRouter({history: createWebHistory(),routes,
});export default router;

步骤 3: 使用 `el-tabs` 和 Vue Router

在 Vue 组件中使用 el-tabs，并通过监听 el-tab-pane 的 name 属性与 Vue Router 的 to 属性相匹配来实现路由跳转。

<template><el-tabs v-model="activeTab" @tab-click="handleTabClick"><el-tab-pane label="Tab 1" name="/tab-one"> </el-tab-pane> <!-- 注意这里使用的是路径 --><el-tab-pane label="Tab 2" name="/tab-two"> </el-tab-pane> <!-- 注意这里使用的是路径 --></el-tabs><router-view/> <!-- 使用 router-view 来显示当前路由对应的组件 -->
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';const router = useRouter();const activeTab = ref('/tab-one'); // 默认激活的标签页const handleTabClick = (tab) => {router.push(tab.props.name); // 切换路由到对应的标签页路径}</script>

步骤 4: 运行

这样，就可以在 Element Plus 的 el-tabs 组件中实现一个路由式的标签页切换功能了。通过点击 el-tabs 的不同标签来切换不同的路由和视图。

elementplus的el-tabs路由式

在使用 Element Plus 的 el-tabs 组件，实现路由式的切换（即点击标签页来切换不同的路由页面）。下面是一个基于 Vue 3 和 Element Plus 实现路由式 el-tabs 的基本步骤和示例。步骤 1: 安装必要的库在vue3项目安装 Vue Router 和 Element …...

编程日记 2025/7/4 5:44:50

ArcGIS地理信息系统空间分析实验教程学习

ArcGIS 作为地理信息系统领域的经典软件，以其强大的功能和广泛的应用场景，成为了众多学者、研究人员和专业人士的首选工具。它不仅可以高效地处理和可视化地理空间数据，还能通过复杂的空间分析模型，揭示地理现象背后的规律和趋势。…...

编程日记 2025/7/4 2:31:43

mac部署CAT监控服务

在 Mac 上部署美团点评开源的 CAT 监控服务端，可以按照以下步骤操作： 1. 环境准备 1.1 安装依赖确保已安装以下工具： JDK 8（建议 OpenJDK 11） MySQL 5.7（存储监控数据）（8.0不支持…...

编程日记 2025/7/4 5:12:17

鸿蒙OS 5 架构设计探秘：从分层设计到多端部署

文章目录鸿蒙OS架构设计探秘：从分层设计到多端部署一、鸿蒙的分层架构设计二、模块化设计的精髓三、智慧分发设计：资源的动态调度四、一次开发，多端部署的实践总结与思考鸿蒙OS架构设计探秘：从分层设计到多端部署最近两年来&a…...

编程日记 2025/7/4 3:53:25

深入解析：ElasticSearch Query 查询方式

全文目录： 开篇语前言摘要概述ElasticSearch Query 查询方式详解1. Match 查询（全文搜索）1.1 Match 查询示例1.2 Match 查询参数扩展 2. Term 查询（精准查询）2.1 Term 查询示例2.2 Terms 查询 3. Bool 查询&#xff08…...

编程日记 2025/7/4 5:24:30

HTML5贪吃蛇游戏开发经验分享

HTML5贪吃蛇游戏开发经验分享这里写目录标题 HTML5贪吃蛇游戏开发经验分享项目介绍技术栈核心功能实现1. 游戏初始化2. 蛇的移动控制3. 碰撞检测4. 食物生成开发心得项目收获后续优化方向结语项目介绍在这个项目中，我使用HTML5 Canvas和原生JavaScript实现了一…...

编程日记 2025/7/4 3:17:05

桥接模式_结构型_GOF23

桥接模式桥接模式（Bridge Pattern）是一种结构型设计模式，核心思想是将抽象与实现分离，使两者能独立变化。它像一座连接两岸的桥梁，让“抽象层”和“实现层”自由组合，避免因多维度变化导致的“类爆炸”问…...

编程日记 2025/7/4 3:44:29

卡尔曼滤波入门（二）

核心思想卡尔曼滤波的核心就是在不确定中寻找最优，那么怎么定义最优呢？答案是均方误差最小的，便是最优。卡尔曼滤波本质上是一种动态系统状态估计器，它回答了这样一个问题： 如何从充满噪声的观测数据中&#xff0c…...

编程日记 2025/7/4 2:58:29

Conda vs. Pip vs. Virtualenv 命令对比任务Conda 命令Pip 命令Virtualenv 命令安装包conda install $PACKAGE_NAMEpip install $PACKAGE_NAMEX更新包conda update --name $ENVIRONMENT_NAME $PACKAGE_NAMEpip install --upgrade $PACKAGE_NAMEX更新包管理器conda update con…...

编程日记 2025/7/4 3:09:58

【Portainer】Docker可视化组件安装

Portainer Portainer 是用于管理容器化环境的一体化平台工程解决方案，提供广泛的定制功能，以满足个人开发人员和企业团队的需求。官方地址: https://www.portainer.io/ 安装在 WSL / Docker Desktop 上使用 Docker 安装 Portainer CE 通过命令或UI页…...

编程日记 2025/7/4 5:18:13

基于深度神经网络的图像防篡改检测方法研究

标题:基于深度神经网络的图像防篡改检测方法研究内容:1.摘要随着数字化时代的发展，图像篡改现象日益普遍，严重影响了图像信息的真实性和可靠性。本文旨在研究基于深度神经网络的图像防篡改检测方法，以有效识别被篡改的图像。通过收集大量真…...

编程日记 2025/7/4 2:56:51

MATLAB导入Excel数据

假如Excel中存在三列数据需要导入Matlab中。保证该Excel文件与Matlab程序在同一目录下。 function [time, voltage, current] test(filename)% 读取Excel文件并提取时间、电压、电流数据% 输入参数:% filename: Excel文件名（需包含路径，如C:\data\…...

编程日记 2025/7/4 3:24:36

华为GaussDB数据库的手动备份与还原操作介绍

数据库的备份以A机上的操作为例。 1、使用linux的root用户登录到GaussDB服务器。 2、用以下命令切换到 GaussDB 管理员用户，其中，omm 为当前数据库的linux账号。 su - omm 3、执行gs_dump命令进行数据库备份： 这里使用gs_dump命令进行备…...

编程日记 2025/7/4 4:37:13

MySQL数据库BUG导致查询不到本该查到的数据

在数据库的日常使用中，我们常常会遇到一些看似匪夷所思的查询问。最近就看到一个因为MySQL BUG导致无法查到本该查询到数据的案例。 1. 问题背数据库版本：MySQL8.0.40 假设我们创建了一个名为 product_info 的表，用于存储产品的相关信息。该…...

编程日记 2025/7/3 7:02:37

Dubbo（25）如何配置Dubbo的协议和端口？

配置Dubbo的协议和端口是设置分布式服务通信的基础步骤。Dubbo支持多种协议（如Dubbo、RMI、HTTP等），你可以根据需求选择合适的协议并配置相应的端口。下面以一个完整的Spring Boot项目为例，详细介绍如何配置Dubbo的协议和端口。 …...

编程日记 2025/7/3 18:57:51

服务器磁盘卷组缓存cache设置介绍

工具1： storcli a. 确认软件包是否安装 [rootlocalhost ~]#rpm -qa | grep storcli storcli-1.21.06-1.noarch 备注：若检索结果为空，需要安装对应的软件安装包。安装命令如下： #rpm -ivh storcli-xx-xx-1.noarch.rpm b. 查看逻辑…...

编程日记 2025/7/4 4:43:42

StarVector：开启多模态SVG生成的新纪元——开源AI模型的革新之作

在AI技术蓬勃发展的今天，图像生成模型已不再局限于像素级的输出。StarVector作为一款开源的多模态SVG生成模型，凭借其独特的代码与视觉融合能力，正在重新定义矢量图形的创作方式。它不仅让图像生成更灵活、更轻量化，还为设计师、开…...

编程日记 2025/7/4 5:08:37

MySQL日期时间函数

函数分类函数名功能描述语法示例获取当前日期和时间 NOW() 返回包含年、月、日、时、分、秒的完整时间戳，格式为 YYYY-MM-DD HH:MM:SS SELECT NOW(); CURDATE() / CURRENT_DATE() 获取当前日期，格式为 YYYY-MM-DD SELECT CURDATE(); 或 SE…...

编程日记 2025/7/4 3:49:24

WinSCP使用教程:(SFTP、SCP、FTP 和 WebDAV)

WinSCP 是一款免费开源的 Windows 环境下的 SFTP、SCP、FTP 和 WebDAV 客户端，主要用于在本地计算机与远程服务器之间安全地传输文件，并提供基本的文件管理功能。 WinSCP是Windows环境下使用SSH的开源图形化的SFTP的客户端 SSH 的全称是 Secure Shell&…...

编程日记 2025/7/4 4:02:12

备份是个好习惯

##解题思路首先看到题目说备份是个好习惯，说明可能存在备份文件泄露用dirsearch或者其他的目录扫描工具扫一扫，发现两个网址状态码正常，其中一个刚好是.bak的备份文件至于flag文件，无法读取源码，都是空的下载备份…...

编程日记 2025/7/4 4:18:30

centos 7 LVM管理命令

物理卷（PV）管理命令 pvcreate：用于将物理磁盘分区或整个磁盘创建为物理卷。示例：sudo pvcreate /dev/sdb1 解释：将 /dev/sdb1 分区创建为物理卷。 pvdisplay：显示物理卷的详细信息，如大小、所属…...

编程日记 2025/7/4 5:15:40

使用 Spring Boot 3.2 集成 MinIO 8.5：实现高效对象存储

摘要 MinIO 是一款高性能的分布式对象存储服务，与云原生应用完美契合。本文将手把手教你如何在 Spring Boot 3.2 项目中集成 MinIO 8.5 版本，实现文件上传、下载和删除等核心功能，并提供完整代码示例和常见问题解决方案。一、环境准备 JDK …...

编程日记 2025/7/4 3:22:53

【Qt】数据库管理

数据库查询工具开发学习笔记一、项目背景与目标背景：频繁编写数据库查询语句，希望通过工具简化操作，提升效率。二、总体设计思路 1. 架构设计 MVC模式：通过Qt控件实现视图（UI），业务逻辑…...

编程日记 2025/7/3 12:20:48

C#：Time.deltaTime

目录第一性原理：从最基本的问题开始什么是Time.deltaTime？ 1. 什么是“帧”？ 2. 什么是“帧率”？ 为什么需要它？ 一个生活化的例子更通俗的类比在Unity中的特殊性第一性原理：从最基本的问题开…...

编程日记 2025/7/3 17:55:21

鸿蒙富文本实践

01 鸿蒙中的文本展示-Text组件 Text 组件的普通用法和其他语言一样，可以直接使用字符串Text(我是一段文本) 通过点语法设置文本样式： Text(我是超长文本，超出的部分显示省略号。I am an extra long text, with ellipses displayed for any ex…...

编程日记 2025/7/4 5:29:20

【字符设备驱动开发–IMX6ULL】（二）Linux 设备号

【字符设备驱动开发–IMX6ULL】（二）Linux 设备号文章目录【字符设备驱动开发–IMX6ULL】（二）Linux 设备号1 设备号的组成2.设备号的分配 1 设备号的组成为了方便管理，Linux 中每个设备都有一个设备号，设…...

编程日记 2025/7/4 3:03:16

Elasticsearch-实战案例

一、没有使用Elasticsearch的查询速度698ms 1.数据库模糊查询不走索引，在数据量较大的时候，查询性能很差。需要注意的是，数据库模糊查询随着表数据量的增多，查询性能的下降会非常明显，而搜索引擎的性能则不会随着数据增…...

编程日记 2025/7/4 5:29:20

电子文档安全管理系统V6.0接口backup存在任意文件下载漏洞

免责声明：本号提供的网络安全信息仅供参考，不构成专业建议。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权，请及时与我联系，我将尽快处理并删除相关内容。漏洞描述电子文档安全管理系统 V6.0 reso…...

编程日记 2025/7/4 5:38:27

jmeter web压力测试压测

下载地址 Apache JMeter - Download Apache JMeter 1. 设置线程组 2. 设置http请求头 3. 设置http请求体 4. 设置结果条目常用函数 ${__RandomString(8, abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789)}${__javaScript( ${__Random(1000, 10000)} /…...

编程日记 2025/7/4 5:20:56

FPGA学习篇——Verilog学习之寄存器的实现

1 寄存器理论这里在常见的寄存器种加了一个复位信号sys_rst_n。（_n后缀表示复位信号低电平有效，无这个后缀的则表示高电平有效） 这里规定在时钟的上升沿有效，只有当时钟的上升沿来临时，输出out 才会改变，…...

编程日记 2025/7/4 2:44:15

CXL UIO Direct P2P学习

前言： 在CXL协议中，UIO（Unordered Input/Output） 是一种支持设备间直接通信（Peer-to-Peer, P2P）的机制，旨在绕过主机CPU或内存的干预，降低延迟并提升效率。以下是UIO的核心概念及UI…...

编程日记 2025/7/4 3:03:16

一键实现:谷歌表单转word（formtoword）

一键将 Google Forms 转换为 Word，最简单的方法有些繁琐的工作让人倍感挫败，明明应该可以自动化。你精心制作了一份 Google Forms，收集了数据，现在需要在 Word 文档中分享其结构或内容。于是，你只能手动复制粘贴问…...

编程日记 2025/7/4 3:16:08

QT第六课------QT界面优化------QSS

作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 🎂 作者介绍： 🎂🎂 🎂 🎉🎉&#x1f389…...

编程日记 2025/7/4 2:35:51

一套SaaS多租户医疗云his源码，基于云计算的医院信息管理系统（云HIS）

基于云计算的医院信息管理系统（云HIS），通过SaaS服务模式提供。这种云HIS系统设计考虑了模板化、配置化、智能化和可扩展性，覆盖了基层医疗机构的核心工作流程，并且能够与监管系统无缝对接，满足未来的扩展需…...

编程日记 2025/7/4 1:13:35

DGNN-YOLO：面向遮挡小目标的动态图神经网络检测与追踪方法解析

一、算法结构与核心贡献 1.1 文章结构采用经典五段式结构：引言：分析智能交通系统（ITS）中小目标检测与追踪的挑战，提出研究动机。相关工作：综述小目标检测（YOLO系列、Faster R-CNN）、目标追踪（SORT、Transformer）和图神经网络（GNN）的进展。方法论：提出DG…...

编程日记 2025/7/4 4:54:28

淘宝获取商品sku详情API接口如何调用？

以下是调用淘宝开放平台/万邦开放平台获取商品SKU详情API接口的具体步骤和示例： 一、API名称及参数 API名称：taobao.item.sku.get主要功能：获取指定商品SKU的详细信息，包括属性、价格、库存等。关键参数： num_iid&am…...

编程日记 2025/7/4 3:28:27

JavaScript 中的原型链与继承

JavaScript 是一种基于原型的编程语言，这意味着它的对象继承是通过原型链而非类的机制来实现的。原型链是 JavaScript 中对象与对象之间继承属性和方法的基础。本文将深入探讨 JavaScript 中的原型链和继承机制，帮助你理解这一重要概念。一、原型&…...

编程日记 2025/7/4 2:28:41

晶晨S905L3A(B)-安卓9.0-开启ADB和ROOT-支持IPTV6-支持外置游戏系统-支持多种无线芯片-支持救砖-完美通刷线刷固件包

晶晨S905L3A(B)-安卓9.0-开启ADB和ROOT-支持IPTV6-支持外置游戏系统-支持多种无线芯片-支持救砖-完美通刷线刷固件包适用型号：M401A、CM311-1a、CM311-1sa、B863AV3.1-M2、B863AV3.2-M、UNT403A、UNT413A、M411A、E900V22C、E900V22D、IP112H等等晶晨S905L3A(B)处…...

编程日记 2025/6/28 1:25:45

【MYSQL】Windows 下 CMD 操作数据库指南

0. 引言在数据库的日常操作中，掌握通过 Windows 下的命令行工具（CMD）连接并操作数据库是一项重要技能。本指南将带您逐步完成 MYSQL 数据库的基本操作，包括使用 CMD 登录数据库、选择目标数据库、查看所有数据表，以及…...

编程日记 2025/7/2 20:07:44

RK3588,V4l2 读取Gmsl相机, Rga yuv422转换rgb (mmap)

RK3588, 使用V4l2 读取 gmsl 相机，获得yuv422格式图像，使用 rga 转换 rgb 图像。减少cpu占用率. 内存管理方式采用 mmap… 查看相机信息 v4l2-ctl --all -d /dev/cam0 , 查看自己相机分辨率，输出格式等信息,对应修改后续代码测试… Driver Info:Driver name : rkcif…...

编程日记 2025/7/1 20:19:52

【多线程】单例模式和阻塞队列

目录一.单例模式 1. 饿汉模式 2. 懒汉模式二.阻塞队列 1. 阻塞队列的概念 2. BlockingQueue接口 3.生产者-消费者模型 4.模拟生产者-消费者模型一.单例模式单例模式（Singleton Pattern）是一种常用的软件设计模式，其核心思想是确保…...

编程日记 2025/6/28 1:42:31

批量将 PDF 文档中的图片提取到指定文件夹

在 PDF 文档中，我们经常需要插入图片来丰富页面内容。然而，当我们需要提取 PDF 文件中的图片时，手动操作会显得非常繁琐。通常我们需要逐页打开 PDF，手动保存每一张图片，这不仅耗时，而且浪费精力。今天&…...

编程日记 2025/7/1 4:41:31

在bootstrap下实现万年历

因为开一个易经学习平台，开发了一个万年历，界面如下： 效果可以看：易学相关代码： <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name&qu…...

编程日记 2025/7/2 21:37:59

基于python大数据的旅游可视化及推荐系统

博主介绍：java高级开发，从事互联网行业六年，熟悉各种主流语言，精通java、python、php、爬虫、web开发，已经做了六年的毕业设计程序开发，开发过上千套毕业设计程序，没有什么华丽的语言&#xff0…...

编程日记 2025/7/1 1:16:06

DeepSeek绘画工程与第三方通道整合架构解析

DeepSeek绘画工程与第三方通道整合架构解析目录系统架构设计技术实现细节核心功能模块创新点与优化策略运行效果展示总结与展望一、系统架构设计 1.1 整体架构图（Mermaid） #mermaid-svg-EcuBlWPPCbUHg0gx {font-family:"trebuchet ms",v…...

编程日记 2025/6/28 1:25:26

单元测试的编写

Python 单元测试示例在 Python 中，通常使用 unittest 模块来编写单元测试。以下是一个简单的示例： 示例代码：calculator.py # calculator.py def add(a, b):return a bdef subtract(a, b):return a - b 单元测试代码：test_c…...

编程日记 2025/6/28 3:58:10

附录C SLAC匹配过程命令定义与实际抓包

附录C SLAC匹配过程命令定义与实际抓包 ISO15118-3 附录A中规定了SLAC匹配过程中的请求命令及应答， 本文将会对比协议中的定义和实际抓包内容，以便读者获得直观的认识。 1 CM_SET_KEY.REQ 定义内容： 实际数据： 注意报文中的 08…...

编程日记 2025/7/1 23:56:41

数据结构 KMP 字符串匹配算法

KMP算法是计算机科学中的一种字符串匹配算法，KMP是三个创始人名字首字母题目 AcWing - 算法基础课前置知识点 KMP算法是一种高效的字符串匹配算法，算法名称取自于三位共同发明人名字的首字母组合。该算法的主要使用场景就是在字符串（也叫…...

编程日记 2025/6/28 4:24:26

从零构建大语言模型全栈开发指南：第三部分：训练与优化技术-3.3.2参数高效微调：LoRA与适配器（Adapter）技术

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲从零构建大语言模型全栈开发指南 -第三部分：训练与优化技术-3.3.2 参数高效微调：LoRA与适配器（Adapter）技术1. 参数高效微调（PEFT）的背景与意义2. LoRA（低秩适配器）技术详解2.1 核心原理与数学表…...

编程日记 2025/7/2 23:52:48

YOLOv8-YOLO12目标检测模型的标签格式和数据结构详细说明

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/7/3 17:44:04

步骤 1: 安装必要的库

步骤 3: 使用 el-tabs 和 Vue Router

步骤 4: 运行

相关文章：

步骤 3: 使用 `el-tabs` 和 Vue Router