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

已于 2023-03-03 09:52:42 修改
阅读量2k 收藏 7
点赞数 4
分类专栏： Vue3项目 文章标签： 前端 javascript 网络
于 2023-03-02 09:49:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62159662/article/details/129222275
版权

💭💭

✨：【项目】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也需要把发送网络请求的函数暴露出来

在这里插入图片描述

在这里插入图片描述

东非不开森
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue+elementUI动态生成面包屑导航教程
12-30
效果如下所示： 项目需要动态生成面包屑导航,并且首页可以点击.其余为路径显示 $route.path select=handleSelect> !menu.child index=menu.path> <icon :name=menu.icon :w=20
vue3动态路由到底如何实现vue-router4中addRoutes失效？
m0_73854403的博客
01-19 1070
大家都知道，后台管理系统中，避不开的一个问题，就是角色权限，那么权限这块必然跟菜单路由关联。vue2中可以通过addRoutes函数，实现动态路由，那么vue3怎么实现呢。
【Vue3】element ui plus面包屑与vue-route结合使用
woodwhale的博客
04-03 9204
【Vue3】element ui plus面包屑与vue-route结合使用 前言 在做一个后台管理系统的时候，发现了element ui plus文档中的面包屑的使用方式，觉得还挺不错的，准备拿来用，发现可以与vue的route结合使用。 1、观察结构 我的后台的布局如下： 使用的是element ui中的如下的格式： 于是我们可以在main这个模块中写入两个部分，第一个就是最上面的面包屑，第二个就是下面的内容部分，这个可以自由发挥。 2、编写面包屑 因为我们的路由不是固定的，所以面包屑肯定是要使用v
vue3+ts 纯前端实现动态路由
最新发布
zs_ms的博客
05-29 461
1. 路由守卫permission.ts一开始放在了文件根目录下，但是tsconfig.app.json 配置中"include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "src/**/*"只识别src下的文件，导致我在文件中使用@别名，编辑器一直爆红，更改文件路径后修复。2.没有使用动态路由时，一直使用useRouter().options.routes渲染导航栏，但是这是一个只读属性，addRouter后值并不会更改，所以选择pinia存贮用户路由表。
addRoute动态添加路由与重置路由
weixin_44289771的博客
05-13 1742
问题： addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由。routrer文件夹index.js。addRoute动态添加子路由。
web前端自动生成动态面包屑导航的方法，以vue为例
Coding home - 漂流瓶jz
07-21 7198
面包屑（Breadcrumb）是网页中一个常见的模块，用于显示用户在网站中当前的所处的位置，并且可以向上导航。如果可以自动生成面包屑，就能够减轻很多重复性工作，也方便代码维护。
刷新页面会导致页面路由重置的问题怎么解决
weixin_51654689的博客
05-28 2835
使用持久化存储：将路由信息存储在本地存储（如LocalStorage或SessionStorage）中，在应用程序初始化时从存储中读取路由信息，并恢复到相应的路由状态。这样在刷新页面后，可以从存储中获取路由信息，并重新导航到之前的路由。使用服务器端渲染（SSR）：使用服务器端渲染技术将Vue应用程序的初始状态和路由信息在服务器端生成，并在页面加载时将其提供给客户端。这样，刷新页面时，服务器会重新生成页面，并保持路由状态的一致性。使用路由懒加载：通过使用路由懒加载，可以将路由组件按需加载。
vue3+ts+vite实现动态路由（包括解决刷新页面路由丢失）
qq_44928780的博客
12-01 2739
vue3+ts+vite实现动态路由（包括解决刷新页面路由丢失）
VUE+elementui面包屑实现动态路由详解
10-16
在本文中，我们将深入探讨如何在Vue+Element UI环境中实现动态路由与面包屑的绑定。 首先，我们需要定义路由配置。在给定的示例中，`routerMap`是一个包含多个路由对象的数组。每个路由对象定义了路径、重定向、...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统（coderwhy）
羊羊羊羊羊羊羊的博客
05-22 3149
coderwhy老师的基于vue3+ts的后台管理系统：基于vue3+pinia+vue-router+axios的后台管理系统。 包含登录页、管理系统主要页面。包含权限管理、动态路由等等。
vue3 配置路由
热门推荐
悟世君子的博客
06-10 1万+
使用 vue3 配置路由，步骤如下 1、安装路由 npm install vue-router@4
router4 ts动态添加路由
借人之智，完善自己
03-25 2642
今天研究route4.0 在vue3里面，使用ts的方式定义路由并且进行动态添加。route4.0在添加路由的方式上面做了一点点的改动。跟之前的有点不一样，因此记录一下。 一、创建路由文件 在项目route里面创建一个简单地index.ts文件。定义内容如下: /** ts版本的路由 2022年2月28日21:00:46 CL */ import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRa
vue中重置路由到某一个页面
wei80231996的博客
04-20 495
在路由文件夹下面 router 文件下 const routes = [ { path: '/', redirect: '/home',//重置页面到home页面 }, { path: '/home', meta: { name: "个人中心", }, component: () => import("@views/Home.vue") }, ]
vue实现动态面包屑
weixin_48398799的博客
08-29 2588
动态面包屑需要利用路由对象matched属性，首先我们先来看看官方对 matched 的介绍。matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录 。可以看到当我们定义好路由结构以后，我们就可以获取到当前页面的路由记录。 首先我们封装一个面包屑组件，取名为 Breadcrumb.vue <script> export default { data() { return { breadList: [] // 路由集合 }; }, wat.
vue-动态生成面包屑
weixin_45608302的博客
09-10 745
配置路由 分三级 { path: '/macthed', name: 'macthed', component: () => import( '../views/macthed'), meta:{title:"资源管理"}, children:[ { path: 'maca', name: 'maca', component: () => import( '../views/mac-son/ma
vue+element 动态面包屑导航
weixin_38547641的博客
08-25 1730
核心代码 watch: { $route() { this.getBreadcrumb() } } methods: { getBreadcrumb() { console.log(this.$route.matched) //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组 if (Object.keys(this.$route.matched[0].meta).length > 0) { this.bread.
Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）
Fxhani的博客
02-18 2116
Vue3 + TS 使用 element-plus 的Icon组件（包括动态路由菜单图标）
vue3 + ts 动态路由
10-31
Vue3 + TypeScript动态路由是一种由后端根据场景生成的合适路由数据，前端获取此数据并进行解析，最后与固定不变的静态路由组合而成的路由。在Vue3 + TypeScript中，可以通过配置动态路由接口来实现动态路由。通过动态路由，可以实现不同用户允许浏览的页面是不一样的，从而更好地满足权限管理的需求。在实现动态路由时，可以使用Vue Router提供的相关API来进行配置和管理。需要注意的是，动态路由的实现需要前后端配合完成，前端需要获取后端提供的路由数据并进行解析，后端需要根据场景生成合适的路由数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东非不开森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值