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

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

news 2026/1/30 8:37:48

💭💭

✨：【项目】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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...

编程新知 2026/1/24 8:20:07

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...

编程新知 2026/1/24 21:40:53

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/1/28 9:52:50

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2026/1/26 16:34:35

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/21 14:21:52

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2026/1/24 22:16:24