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

【项目】Vue3+TS 动态路由 面包屑 查询重置 列表

news 2025/12/15 19:25:04

💭💭

✨：【项目】Vue3+TS 动态路由 面包屑 查询重置 列表
 
💟：东非不开森的主页
 
💜: 热烈的不是青春，而是我们💜💜
 
🌸: 如有错误或不足之处，希望可以指正，非常感谢😉
 

项目

  • 一、动态路由
  • 二、面包屑
  • 三、搭建搜索框
  • 四、搭建用户列表

一、动态路由

  1. 动态获取所有的路由对象，放到数组中
    路由对象都在独立的文件中
    从文件中将所有的路由对象先读取数组中

在这里插入图片描述
打印出localRoutes
在这里插入图片描述

在这里插入图片描述

  • 可以封装一个工具
  • 动态的获取所有的路由对象，放到数组中
  • 路由对象都在独立的文件中，那么就从文件中将所有的路由对象先读取数组中

在这里插入图片描述

  • 根据菜单去匹配正确的路由

在这里插入图片描述

然后在store里面

在这里插入图片描述

用户刷新默认加载数据

再定义一个action

在这里插入图片描述

store中的数据
在这里插入图片描述

firstMenu进行记录
记录第一个被匹配的路由
在这里插入图片描述

  • 进行判断，是否进到main页面中了

在这里插入图片描述

  • 通过path匹配menu
  • 给route的顶层菜单添加重定向的功能

在这里插入图片描述

  • 就是你点击那个页面，刷新后还是那个页面

在这里插入图片描述

在这里插入图片描述

二、面包屑

  • 我们也是需要用动态路由去匹配的

在这里插入图片描述

  • 用element-plus中的组件，面包屑
    通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 失效。

在这里插入图片描述

在这里插入图片描述

三、搭建搜索框

在这里插入图片描述

  • 需要用到form layout等
  • 我们给el-form进行双向绑定，这样可以在表单里输入内容

在这里插入图片描述

  • 重置按钮

在这里插入图片描述

  • 绑定ref进行重置操作
  • 给按钮一个点击事件

在这里插入图片描述

  • 日期中文化

在这里插入图片描述

在这里插入图片描述

四、搭建用户列表

  1. 发送请求

在这里插入图片描述
2. 在store中获取数据

在这里插入图片描述

  • 使用数据

在这里插入图片描述

  • 基本搭建
    我们只需要给table绑定数据
    type prop进行绑定名字
    就可以正确的渲染数据了

在这里插入图片描述
在这里插入图片描述

  • 作用域插槽
    格式化时间dayjs
    这是一个库哦
    在这里插入图片描述
    在这里插入图片描述

  • 分页要搞清楚每个变量所代表的含义，其实也就很好理解啦

在这里插入图片描述

  • 对分页数据进行控制，比如10个一条，20,30.。。。。
    那么这个时候就需要用到网络请求了，我们需要控制请求数据的位置

在这里插入图片描述

在这里插入图片描述

对查询进行处理
可以就要用到传递事件和网络请求结合了
在search里面进行发出事件
在这里插入图片描述

  • 传递给父组件user
  • 父组件接收事件
  • 我们需要给内容绑定ref
  • 对其进行网络请求
  • content也需要把发送网络请求的函数暴露出来

在这里插入图片描述

在这里插入图片描述

相关文章：

【项目】Vue3+TS 动态路由 面包屑 查询重置 列表

💭💭 ✨：【项目】Vue3TS 动态路由 面包屑 查询重置 列表   💟：东非不开森的主页   💜: 热烈的不是青春，而是我们💜💜   🌸: 如有错误或不足之处&#xff0…...

编程日记 2023/3/2 13:26:03

前脚背完这些接口自动化测试面试题，后脚就进了字节测试岗

1、请结合你熟悉的项目，介绍一下你是怎么做测试的？ -首先要自己熟悉项目，熟悉项目的需求、项目组织架构、项目研发接口等 -功能 接口 自动化 性能 是怎么处理的？ -第一步： 进行需求分析，需求评审&#…...

编程日记 2023/3/2 13:24:58

termux 安装centos

相关链接 centos官网rootfs制作其他人提供的安装脚本centos镜像列表其他人提供的安装脚本的说明 如果想使用老版本的centos7跟着上面链接5走就行 如果想用新系统比如centos9 stream，就跟我来 Q:为什么要装新系统? A:旧系统太多软件已过时，升级费时费…...

编程日记 2023/3/2 13:23:50

从菜鸟程序员到高级架构师，竟然是因为这个字final

final实现原理 简介 final关键字，实际的含义就一句话，不可改变。什么是不可改变？就是初始化完成之后就不能再做任何的修改，修饰成员变量的时候，成员变量变成一个常数；修饰方法的时候，方法不允…...

编程日记 2023/3/2 13:22:43

【vulhub漏洞复现】CVE-2018-2894 Weblogic任意文件上传漏洞

一、漏洞详情影响版本weblogic 10.3.6.0、weblogic 12.1.3.0、weblogic 12.2.1.2、weblogic 12.2.1.3WebLogic是美国Oracle公司出品的一个application server，确切的说是一个基于JAVAEE架构的中间件，WebLogic是用于开发、集成、部署和管理大型分布式Web应…...

编程日记 2023/3/2 13:21:35

函数栈帧详解

写在前面 这个模块临近C语言的边界，学起来需要一定的时间，不过当我们知道这些知识后，在C语言函数这块我们看到的不仅仅是表象了，可以真正了解函数是怎么调用的。不过我的能力有限，下面的的知识若是不当，还…...

编程日记 2023/3/2 13:20:27

Spring 事务（编程式事务、声明式事务@Transactional、事务隔离级别、事务传播机制）

文章目录1. 事务的定义2. Spring 中事务的实现2.1 MySQL 中使用事务2.2 Spring 中编程式事务的实现2.3 Spring 中声明式事务2.3.1 声明式事务的实现 Transactional2.3.2 Transactional 作用域2.3.3Transactional 参数设置2.3.4 Transactional 异常情况2.3.5 Transactional 工作…...

编程日记 2023/3/2 13:19:20

车载技术——Window Display之surface的绘制过程与原理

一、Surface 概述 OpenGL ES/Skia定义了一组绘制接口的规范，为什么能够跨平台？ 本质上需要与对应平台上的本地窗口建立连接。也就是说OpenGL ES负责输入了绘制的命令，但是需要一个 “画布” 来承载输出结果，最终展示到屏幕。这个…...

编程日记 2023/3/2 13:18:11

2023年全国最新工会考试精选真题及答案10

百分百题库提供工会考试试题、工会考试预测题、工会考试真题、工会证考试题库等，提供在线做题刷题，在线模拟考试，助你考试轻松过关。 51.（）是企业工会的权力机关，每年召开一至两次会议。 A.会员大会 B.会…...

编程日记 2023/3/2 13:16:59

pytorch-复现经典深度学习模型-LeNet5

Neural Networks 使用torch.nn包来构建神经网络。nn包依赖autograd包来定义模型并求导。 一个nn.Module包含各个层和一个forward(input)方法，该方法返回output。 一个简单的前馈神经网络，它接受一个输入，然后一层接着一层地传递，…...

编程日记 2023/3/2 13:15:53

【C++】类和对象（上）

文章目录对象的介绍类的介绍类的两种定义方式类的访问限定符及封装访问限定符封装类的作用域类的实例化类的对象模型对象的介绍 C语言是面向过程的，关注的是过程，分析出求解问题的步骤，通过函数调用逐步解决问题；   C是基于面向…...

编程日记 2023/3/2 13:14:48

工作中责任链模式用法及其使用场景？

前言 笔者是金融保险行业，有这么一种场景，业务员录完单后提交核保，这时候系统会对保单数据进行校验，如不允许手续费超限校验，客户真实性校验、费率限额校验等等，当校验一多时，维护起来特别麻烦…...

编程日记 2023/3/2 13:13:43

三八女神节有哪些数码好物？2023年三八女神节数码好物清单

2023年的三八女神节就快到了，大家还在烦恼，不知道有哪些数码好物？在此，我来给大家分享几款三八女神节实用性强的数码好物，一起来看看吧。 一、蓝牙耳机：南卡小音舱 参考价：239 推荐理由&…...

编程日记 2023/3/2 13:12:34

FairGuard-Windows加固工具版本更新日志

FairGuard-Windows加固工具1.2.2版本更新日志： ■ 增加Unity Resources资源加密的支持; ■ 增加单独Assetbundle资源加密，并同时支持压缩包和文件夹作为输入的方式; ■ 增加对游戏原文件夹加固的支持; Windows加固方案介绍 FairGuard专为游戏量身定…...

编程日记 2023/3/2 13:11:27

基于RT-Thread完整版搭建的极简Bootloader

项目背景Agile Upgrade: 用于快速构建 bootloader 的中间件。example 文件夹提供 PC 上的示例特性适配 RT-Thread 官方固件打包工具 (图形化工具及命令行工具)使用纯 C 开发，不涉及任何硬件接口，可在任何形式的硬件上直接使用加密、压缩支持如下&#xf…...

编程日记 2023/3/2 13:10:16

3.flinkDateStreamAPI介绍env与source

执行环境 Flink可以在不同的环境上下文中运行.可以本地集成开发环境中运行也可以提交到远程集群环境运行. 不同的运行环境对应的flink的运行过程不同,需要首先获取flink的运行环境,才能将具体的job调度到不同的TaskManager 在flink中可以通过StreamExecutionEnvironment类获取…...

编程日记 2023/3/2 13:09:09

$ 2 :数据类型

1.数据类型 1.1基本类型 a、整型int b、浮点型float c、字符型char 1.2构造类型 a、数组[ ] b、结构体struct 1.3指针类型 * 1.4空类型（void） 2.关键字 autoconstdoublefloatintshortstructunsignedbreakcontinueelseforlongsignedswitchvoidcasedefaultenumgotoregistersiz…...

编程日记 2023/3/2 13:08:04

类和对象 - 上

本文已收录至《C语言》专栏！ 作者：ARMCSKGT 目录 前言 正文 面向过程与面向对象 面向过程的解决方法 面向对象的解决方法 面向对象的优势 类的引入 早期C类的实现 class定义类 class定义规则 类成员的两种定义方式 类的访问限定符及封装 访…...

编程日记 2023/3/2 13:06:55

补档：红黑树代码实现+简略讲解

红黑树讲解和实现1 红黑树介绍1.1 红黑树特性1.2 红黑树的插入1.3 红黑树的删除2 完整代码实现2.1 rtbtree.h头文件2.2 main.c源文件1 红黑树介绍 红黑树( Red-Black tree，简称RB树)是一种自平衡二叉查找树，是计算机科学中常见的一种数据结构&#xff0c…...

编程日记 2023/3/2 13:05:47

FirePower X2 14.0.1 for RAD Studio Alexandria

介绍 FirePower X2 FirePower X2 集成了 RAD Studio 11.0 Alexandria 中的新功能，并预览了我们的新特色组件 TwwDataGrouper。 FirePower X2 还允许您为 Apple 的新 M1 芯片构建应用程序，这样您就可以进一步利用 M1 芯片来提高本机应用程序的性能&#x…...

编程日记 2023/3/2 13:04:42

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/12/10 2:57:55

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/12/14 17:22:35

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/12/13 0:29:47

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/12/9 2:37:58

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/11/13 13:42:14

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/12/11 21:25:46

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/12/5 12:22:46

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/12/9 7:25:28

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/12/15 0:18:48