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

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

news 2026/2/9 0:53:57

💭💭

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...

编程新知 2026/2/7 23:18:37

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...

编程新知 2026/1/30 17:24:20

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/2/7 13:27:36

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...

编程新知 2026/1/30 9:51:12

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2026/1/29 8:28:23

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2026/2/4 17:28:54

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15