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

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

news 2026/5/13 16:52:43

💭💭

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

思源宋体完全指南：7种字体样式免费商用，打造专业中文排版

思源宋体完全指南：7种字体样式免费商用，打造专业中文排版 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为设计项目寻找既专业又免费的中文字体而烦恼吗&a…...

编程新知 2026/5/13 16:43:06

Next.js企业级开发样板Next-Enterprise：一站式集成最佳实践与工具链

1. 项目概述：为什么说 Next-Enterprise 是 Next.js 企业级开发的“瑞士军刀”？ 如果你正在用 Next.js 构建一个中大型、对代码质量和开发体验有要求的企业级应用，那你大概率遇到过这些头疼事：项目初始化配置繁琐，得花…...

编程新知 2026/5/13 16:36:30

ClawSuite：模块化网络安全工具集的设计原理与实战应用

1. 项目概述：ClawSuite，一个被低估的网络安全工具集如果你在网络安全领域摸爬滚打过几年，尤其是做过渗透测试或者红队评估，那你肯定对Metasploit、Nmap、Burp Suite这些名字如数家珍。但今天我想聊一个在GitHub上相对低调&#xf…...

编程新知 2026/5/13 16:01:28

避开这些坑：ADSP-SC589开发中JTAG连接、驱动安装与调试的常见问题解决

ADSP-SC589开发实战：JTAG连接与调试避坑指南 当ADSP-SC589开发板与AD-HP530ICE仿真器首次相遇时，许多开发者会陷入连接失败的困境。不同于普通MCU开发，SHARC系列DSP的JTAG调试存在诸多技术细节，稍有不慎就会导致数小时的无效排查。…...

编程新知 2026/5/13 15:57:17

别再死记硬背了！用STM32H7的USB CDC类实战，反向理解USB协议栈核心概念

从实战出发：用STM32H7的USB CDC类逆向掌握协议栈精髓 当开发板上的LED第一次随着串口指令闪烁时，我意识到USB协议栈不再是手册里晦涩的名词——端点成了数据管道，描述符变身设备身份证，而曾经令人头疼的HID报告突然有了具象意义。…...

编程新知 2026/5/13 13:26:17

终极指南：使用dmg2img免费快速转换苹果DMG镜像文件

终极指南：使用dmg2img免费快速转换苹果DMG镜像文件 【免费下载链接】dmg2img DMG2IMG allows you to convert a (compressed) Apple Disk Images (imported from http://vu1tur.eu.org/dmg2img). Note: the master branch contains imported code, but lacks bugfix…...

编程新知 2026/5/13 13:11:26

构建AI信任层TrustLayer：开源插件化架构保障AI输出安全与可靠

1. 项目概述：为什么我们需要一个AI信任层？最近几个月，我几乎把所有主流的AI工具都试了个遍。从代码助手到文案生成，从图像创作到数据分析，每个工具都承诺能提升效率。但用着用着，我发现一个越来越明显的问题…...

编程新知 2026/5/13 12:58:59

5分钟上手Sticky：Linux桌面终极便签管理工具完全指南

5分钟上手Sticky：Linux桌面终极便签管理工具完全指南 【免费下载链接】sticky A sticky notes app for the linux desktop 项目地址: https://gitcode.com/gh_mirrors/stic/sticky 你是否厌倦了在电脑桌面上寻找重要信息的混乱体验？是否曾因为忘记…...

编程新知 2026/5/13 12:33:29

3个步骤搭建Sunshine游戏串流服务器：从零到一的完整指南

3个步骤搭建Sunshine游戏串流服务器：从零到一的完整指南 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 你是否曾经梦想过在客厅的电视上玩书房电脑里的3A大作&#xf…...

编程新知 2026/5/13 11:22:40

RAG 系统优化全流程：从数据入库到召回排序

RAG（Retrieval-Augmented Generation）系统的检索质量直接决定生成内容的上限。本文从工程落地角度，系统梳理 RAG 检索链路的三个核心阶段——入库、查询与召回。针对每个阶段的关键技术（语义分割、问答模拟、查询改写、语义校验、混合检索、语义重排）给出定义、问题背景、…...

编程新知 2026/5/13 9:38:01