【Vue3】路由Params传参
【Vue3】路由Params传参
- 背景
- 简介
- 开发环境
- 开发步骤及源码
- 总结
背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中路由传递 Params 参数的方法。
Params 参数是通过 URL 路径的一部分传递的数据,通常用于标识资源的唯一性或层级关系,如 http://demo.net/user/1
中的 1
便是一个 Params 参数,通常表示系统用户 ID。Params 参数常用于 RESTful 风格 API 中。
Vue3 可以使用 模板字符串 或 对象 传递 Params 参数。
开发环境
分类 | 名称 | 版本 |
---|---|---|
操作系统 | Windows | Windows 11 |
IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
1> 在 【Vue3】路由Query传参 基础上修改 src/router/index.ts
,将 /system/warn/detail
路由配置由 Query 传参修改为 Params 传参。
import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '@/pages/Dashboard.vue'
import Log from '@/pages/Log.vue'
import Permission from '@/pages/Permission.vue'
import Warn from '@/pages/Warn.vue'
import System from '@/pages/System.vue'
import About from '@/pages/About.vue'
import WarnDetail from '@/pages/WarnDetail.vue'const router = createRouter({// 路由器工作模式history: createWebHistory(),routes: [{path: '/dashboard',component: Dashboard},{path: '/system',component: System,children: [{name: 'SystemPermission',path: 'permission',component: Permission},{name: 'SystemLog',path: 'log',component: Log},{name: 'SystemWarn',path: 'warn',component: Warn,children: [{name: 'SystemWarnDetail',path: 'detail/:time/:level/:msg',component: WarnDetail}]}]},{path: '/about',component: About}]
})export default router
2> 修改 src/pages/Warn.vue
,使用对象传递 Params 参数。
<template><div class="warn"><div class="timeline"><h3>告警发生时间</h3><ul><li v-for="warn in warns" :key="warn.id"><RouterLink :to="{name: 'SystemWarnDetail',params: {time: warn.time,level: warn.level,msg: warn.msg}}">{{ warn.time }}</RouterLink></li></ul></div><div class="warn-detail"><RouterView /></div></div>
</template><script setup lang="ts">
import { reactive } from 'vue'
import { RouterLink, RouterView } from 'vue-router'const warns = reactive([{ "id": 9, "time": "2024/08/16 19:45:35", "msg": "服务XX升级失败回退", "level": 1 },{ "id": 8, "time": "2024/08/15 23:58:41", "msg": "服务XXCPU占用率超警戒值", "level": 2 },{ "id": 7, "time": "2024/08/15 20:10:00", "msg": "缓存使用量超警戒值XX", "level": 2 },{ "id": 6, "time": "2024/08/15 17:42:08", "msg": "服务XX无法恢复", "level": 1 },{ "id": 5, "time": "2024/08/15 15:14:39", "msg": "服务XX异常重启", "level": 2 },{ "id": 4, "time": "2024/08/13 01:05:17", "msg": "请求处理失败数超阈值XX", "level": 2 },{ "id": 3, "time": "2024/08/12 22:31:26", "msg": "服务XX持续上报告警", "level": 4 },{ "id": 2, "time": "2024/08/12 14:22:54", "msg": "消息队列积压XX", "level": 3 },{ "id": 1, "time": "2024/08/10 10:01:01", "msg": "请求处理平均时延超警戒值XX", "level": 2 }
])
</script><style scoped lang="scss">
.warn {.timeline, .warn-detail {height: 420px;li {line-height: 35px;}}.timeline {border-right: 1px solid #aaa;width: 37%;float: left;}.warn-detail {width: 60%;float: right;}
}
</style>
3> 修改 src/pages/WarnDetail.vue
接收路由传递的 Params 参数。
<template><div class="detail"><h3>告警详情</h3><div>上报时间:{{ params.time }}</div><div>告警级别:<span v-if="params.level == '1'" class="warn-level warn-level-1">一级</span><span v-else-if="params.level == '2'" class="warn-level warn-level-2">二级</span><span v-else-if="params.level == '3'" class="warn-level warn-level-3">三级</span><span v-else-if="params.level == '4'" class="warn-level warn-level-4">四级</span></div><div>告警信息:{{ params.msg }}</div></div>
</template><script setup lang="ts">
import { toRefs } from 'vue';
import { useRoute } from 'vue-router'const { params } = toRefs(useRoute())
</script><style scoped lang="scss">
.detail {padding: 0 10px;div {min-height: 30px;line-height: 30px;.warn-level-1 {color: red;}.warn-level-2 {color: orange;}.warn-level-3 {color: yellow;}.warn-level-4 {color: blue;}}
}
</style>
4> 执行命令 npm run dev
启动应用,浏览器访问:http://localhost:5173/
,点击左侧菜单进入 系统管理
页面,点击顶部 告警
按钮进入告警页面,点击告警页面左侧 告警发生时间
查看右侧的 告警详情
,已成功显示路由传递的 Params 参数。
5> 本示例不能使用 模板字符串 传参方式,因为传递的数据 warn.time
中包含 /
,这会导致 URL 解析错误,出现如下提示。
因此 模板字符串 只适用于传递不含特定字符的简单数据,感兴趣的可将本示例中的 warn.time
从传递的数据中去掉后尝试使用 模板字符串。
总结
Vue3 路由传递 Params 参数的注意点:
- 传参组件可以使用 模板字符串 或 对象 两种方式传递 Params 参数,其中 对象 传参方式代码可读性更好,且当传递的数据中包含
/
等字符时,使用 模板字符串 传递会遇到 URL 解析错误,所以建议统一使用 对象 传参方式; - 对象 传参必须使用命名路由,即
<RouterLink>
组件的to
属性接收的对象参数必须使用name
指定路由,不能使用path
指定路由; - 接收参数的组件调用
vue-router
组件的useRoute()
方法接收路由对象,其中的params
属性即路由传递的 Params 参数。
相关文章:
【Vue3】路由Params传参
【Vue3】路由Params传参 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日…...
授权cleanmymac访问全部磁盘 Mac授权访问权限 cleanmymac缺少权限
CleanMyMac是Mac系统下的一款专业的苹果电脑清理软件,同时也是一款优秀的电脑系统管理软件。它能有效清理系统垃圾,快速释放磁盘内存,缓解卡顿现象,保障系统顺畅地运行。 全磁盘访问权限,就好比机场内进行的安全检查。…...
Ubuntu/18.04 LTS下编译 BoringSSL 库
1、准备一个 Ubuntu/18.04 LTS 系统的设备 2、安装软件 GIT、GCC、CMAKE、G、Golang:1.16 及以上版本 3、克隆仓库源 git clone https://boringssl.googlesource.com/boringssl cd boringssl 4、使用特定版本 git checkout 9fc1c33e9c21439ce5f87855a6591a9324e569fd 5、编…...
【stm32项目】多功能智能家居室内灯光控制系统设计与实现(完整工程资料源码)
多功能智能家居室内灯光控制系统设计与实现 目录: 目录: 前言: 一、项目背景与目标 二、国内外研究现状: 2.1 国内研究现状: 2.2 国外研究现状: 2.3 发展趋势 三、硬件电路设计 3.1 总体概述 3.2 硬件连接总…...
xss靶场详解
目录 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 6.第六题 7.第七题 8.第八题 1.第一题 在源码script标签里边,innerhtml是用于访问或修改 HTML 元素内的 HTML 内容的,这里是访问spaghet这个元素的,并通过括号里面的东西搜索当前…...
华为的流程管理
华为建设流程体系始于2000年,那时华为公司面临着快速扩张和全球化发展的挑战,意识到传统的管理模式已经无法满足业务发展的需求。为了提高公司的管理效率和竞争优势,华为决定启动流程体系的建设。在建设过程中,华为借鉴了业界最佳…...
操作系统Linux
1.Linux命令 ls:查看当前目录下所有目录和文件ps:查看所有正在运行的进程top:显示当前系统中占用资源最多的一些进程,shiftm按照内存查看大小netstat:查看端口的命令vi:查看文件的命令rm:删除文…...
1、.Net UI框架:MAUI - .Net宣传系列文章
.NET MAUI(Multi-platform App UI)是一个跨平台的UI框架,它是.NET统一应用模型的一部分,允许开发者使用C#和.NET来创建适用于iOS、Android、macOS和Windows的应用程序。MAUI继承了Xamarin.Forms的一些概念,但提供了更多的原生平台集成和改进的…...
Spring boot 使用 jSerialComm 对串口使用发送信息并接收
什么是 jSerialComm? jSerialComm 是一个 Java 库,旨在提供一种独立于平台的方式来访问标准串行端口,而无需外部库、本机代码或任何其他工具。它旨在替代 RxTx 和(已弃用的)Java Communications API,具有更…...
江协科技STM32学习笔记(第10章 SPI通信)
第10章 SPI通信 10.1 SPI通信协议 10.1.1 SPI通信 SPI(Serial Peripheral Interface)是由Motorola公司开发的一种通用数据总线; 串行外设接口; I2C无论是软件还是软件电路,设计的都还是比较复杂的,硬件…...
力扣热题100_回溯_22_括号生成
文章目录 题目链接解题思路解题代码 题目链接 22. 括号生成 数字 n 代表生成括号的对数,请你设计一个函数,用于能够生成所有可能的并且 有效的 括号组合。 示例 1: 输入:n 3 输出:[“((()))”,“(()())”,“(())()…...
【k8s】ubuntu24.04 containerd 手动从1.7.15 换为1.7.20
24.04的这个应该是apt 安装的1.7.20-1 root@k8s-master-pfsrv:~# sudo apt update && sudo apt install containerd.io -y 命中:1 http://mirrors.aliyun.com/docker-ce/linux/ubuntu noble InRelease 命中:2 https://dl.google.com/linux/chrome/deb stable InRelease…...
Java二十三种设计模式-备忘录模式(19/23)
本文深入探讨了备忘录模式,从定义、组成、实现到使用场景、优缺点、与其他模式的比较,以及最佳实践和替代方案,全面解析了如何在软件开发中有效地保存和恢复对象状态,以支持复杂的撤销操作和历史状态管理。 备忘录模式:…...
js一些杂乱理解
js 的值类型和引用类型 引用类型:object,array,function值类型:诸如number,stringboolean,null,Undefined,Symbol js使用变量访问对象属性示例 var myDog "Hunter"; var dogs { Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle&q…...
机器学习 之 线性回归算法
目录 线性回归:理解与应用 什么是线性回归? 一元线性回归 正态分布的重要性 多元线性回归 实例讲解 数据准备 数据分析 构建模型 训练模型 验证模型 应用模型 代码实现 线性回归:理解与应用 线性回归是一种广泛使用的统计方法&…...
ThreadLoad如何防止内存溢出
优质博文:IT-BLOG-CN 从 ThreadLocalMap看 ThreadLocal使用不当的内存泄漏问题 【1】基础概念 : 首先我们先看看ThreadLocalMap的类图,我们知道 ThreadLocal只是一个工具类,他为用户提供get、set、remove接口操作实际存放本地变…...
2024.8.19 学习记录 —— 作业
一、TCP机械臂测试 #include <myhead.h>#define SER_PORT 8888 // 与服务器保持一致 #define SER_IP "192.168.0.114" // 服务器ip地址int main(int argc, const char *argv[]) {// 创建文件描述符打开键盘文件int fd open("/dev/input/event1…...
Java 阿里云视频直播开发流程
首先来看一下直播效果 推流工具有很多种(例如OBS、阿里云直播Demo推流、等等,我用的是芯象导播)阿里播放器地址 一、直播基础服务概述 官方文档说明 二、直播域名配置需要两个域名(推流域名、播流域名) 官方文档说…...
SQLite 轻量级的嵌入式关系型数据库的替代软件
SQLite 是一个轻量级的嵌入式关系型数据库,由于其简单易用和跨平台的特性,被广泛应用于各种应用程序中。以下是一些可作为SQLite替代品的数据库软件或可视化管理工具: 1. **SQLiteStudio**:这是一个免费、开源的跨平台SQLite数据…...
Flutter-自适用高度PageView
需求 在 Flutter 中,PageView 是一个非常常用的组件,能够实现多个页面的滑动切换。然而,默认的 PageView 高度是固定的,这在展示不同高度的页面时,可能会导致不必要的空白或内容裁剪问题。为了使 PageView 能够根据每…...
群晖NAS本地搭建可远程交互的大型语言模型LLM聊天机器人
文章目录 前言1. 拉取相关的Docker镜像2. 运行Ollama 镜像3. 运行Chatbot Ollama镜像4. 本地访问5. 群晖安装Cpolar6. 配置公网地址7. 公网访问8. 固定公网地址 前言 本文主要分享如何在群晖NAS本地部署并运行一个基于大语言模型Llama 2的个人本地聊天机器人并结合内网穿透工具…...
TypeScript 构建工具之 webpack
在实际开发中,直接使用TypeScript 编译器的情况不多。 在项目中,需要使用构建工具对代码进行打包,不可能脱离项目使用TypeScript 编译器单独打包TypeScript 。 那如何将 webpack 和 TypeScript 进行集成? 参考文档: w…...
conda环境下在pycharm中调试scrapy项目
前提条件 已经创建好了conda环境已经安装好了scrapy框架项目初始化完成 编写一个爬虫脚本 import scrapyclass StackOverflowSpider(scrapy.Spider):name stackoverflowstart_urls [http://stackoverflow.com/questions?sortvotes]def parse(self, response):print("…...
contenteditable=“true“的标签限制字数的时候修改光标位置
contenteditable"true"的标签限制字数的时候修改光标位置 有时候input和textarea并不能完全满足ui需求,这个时候我们就用contenteditable"true"来将别的标签修改为可编辑状态,但当我们通过js修改了内容之后光标的位置就是一个问题&…...
51单片机-LED灯蜂鸣器数码管按键DS18B20温度传感器
LDE灯的相关程序 LED灯闪烁 LED流水灯 方法1 方法二: 因为P1口可以直接控制P1^0~P1^7的8个led灯,利用一个8位的二进制数字来进行控制即可。如果要点亮P1^0 只需要给P1口传递 1111 1110即可。 蜂鸣器的使用 什么是蜂鸣器? 蜂鸣器是一种一…...
笔记本一线品牌有哪些
笔记本电脑的一线品牌通常指的是在市场上具有较高市场份额、良好口碑、较强的技术实力和服务能力的品牌。根据目前的信息,笔记本电脑市场的一线品牌主要包括以下几个: 联想 (Lenovo):联想在全球笔记本市场上的占有率较高,其产品线…...
mysql聚合函数和分组
我最近开了几个专栏,诚信互三! > |||《算法专栏》::刷题教程来自网站《代码随想录》。||| > |||《C专栏》::记录我学习C的经历,看完你一定会有收获。||| > |||《Linux专栏》࿱…...
ubuntu20.04+RealSenseD455
ubuntu20.04安装驱动双目相机RealSenseD455 安装环境安装RealSense SDK 2.0ROS包安装启动Realsense摄像头存在的 bugD455标定安装环境 系统:Ubuntu20.04 ROS:Noetic 视觉传感器:Intel RealSense D455 安装RealSense SDK 2.0 该安装有两种方式,一个是用命令安装,另一个是…...
WAF绕过技巧
WAF绕过技巧 WAF(Web Application Firewall)是一种安全系统,旨在监控和控制网络流量,以防止攻击,如SQL 注入、跨站脚本(XSS)和拒绝服务(DoS)。 WAF 可以通过多种方式绕过…...
HarmonyOS应用三之组件生命周期和参数传递
目录: 1、生命周期的执行顺序2、页面数据传递3、图片的读取4、数据的备份和恢复5、轮播图6、页面布局图 1、生命周期的执行顺序 /** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* yo…...
[Qt][Qt 网络][上]详细讲解
目录 0.概述1.UDP Socket1.核心API概览2.回显服务器3.回显客户端 0.概述 要使用Qt中有关网络编程的API,需要添加network模块 1.UDP Socket 1.核心API概览 主要的类有两个:QUdpSocket和QNetworkDatagramQUdpSocket表⽰⼀个UDP的socket⽂件 bind(const …...
读零信任网络:在不可信网络中构建安全系统21读后总结与感想兼导读
1. 基本信息 零信任网络:在不可信网络中构建安全系统 道格巴斯(Doug Barth) 著 人民邮电出版社,2019年8月出版 1.1. 读薄率 书籍总字数252千字,笔记总字数73194字。 读薄率73194252000≈29.5% 这个读薄率是最高的吧&#x…...
Java基础——注释
在开发中注释是必不可少的,帮助我们更好的标记阅读代码,下面介绍几种常用的注释方式。 一、注释种类 1. 单行注释 使用//一行代码来进行注释,只能注释一行内容 2. 多行注释 使用斜杠星号的方式 /*注释多行代码*/,注释多行代…...
Redis未授权访问漏洞利用合集
一、基本信息 靶机:IP:192.168.100.40 攻击机:IP:192.168.100.60 二、漏洞 & 过程 Redis 未授权访问漏洞利用无口令远程登录靶机 靶机 cd redis-4.0.8/src./redis-server ../redis.conf 攻击机 ./redis-cli -h 192.168.100.40 Redis 未授权访问…...
基于asp.net的在线考试系统、基于c#的在线考试管理系统
摘 要 伴随着社会以及科学技术的发展,互联网已经渗透在人们的身边,网络慢慢的变成了人们的生活必不可少的一部分,紧接着网络飞速的发展,管理系统这一名词已不陌生,越来越多的学校、公司等机构都会定制一款属于自己个…...
将 hugo 博客搬迁到服务器
1. 说明 在 Ubuntu 22.04 上使用 root 账号,创建普通账号,并赋予 root 权限。 演示站点:https://woniu336.github.io/ 魔改hugo主题: https://github.com/woniu336/hugo-magic 2. 服务器配置 建立 git 用户 adduser git安装 git sudo apt …...
【Datawhale AI夏令营第四期】 魔搭-大模型应用开发方向笔记 Task04 RAG模型 人话八股文Bakwaan_Buddy项目创空间部署
【Datawhale AI夏令营第四期】 魔搭-大模型应用开发方向笔记 Task04 RAG模型 人话八股文Bakwaan_Buddy项目创空间部署 什么是RAG: 我能把这个过程理解为Kimi.ai每次都能列出的一大堆网页参考资料吗?Kimi学了这些资料以后,根据这里面的信息综…...
CTF密码学小结
感觉没啥好总结的啊 基础的永远是RSA、流密码、哈希、对称密码、古典密码那一套(密码学上过课都会),其他的就是数论的一些技巧 似乎格密码也很流行,以及一些奇奇怪怪的性质利用也很多 1、random设置种子后随机的性质:…...
Vue快速入门(七)——Vue3 状态管理 - Pinia(二)
目录 六、核心概念——Getter 1、基本操作 定义getter 访问getter 2、访问其他 getter 3、向 getter 传递参数 4、访问其他 store 的 getter 使用 setup() 时的用法 使用选项式 API 的用法 使用 setup() 不使用 setup() 七、核心概念——Action 1、基本操作 定义a…...
ZooKeeper集群环境部署
1. ZooKeeper安装部署 1.1 系统要求 1.1.1 支持的平台 ZooKeeper 由多个组件组成。一些组件得到广泛支持,而另一些组件仅在较小的一组平台上得到支持。 客户端是 Java 客户端库,由应用程序用于连接到 ZooKeeper 集群。 服务器是在 ZooKeeper 集群节点…...
10 个 C# 关键字和功能
在 Stack Overflow 调查中,C# 语言是排名第 5 位的编程语言。它广泛用于创建各种应用程序,范围从桌面到移动设备再到云原生。由于有如此多的语言关键字和功能,对于开发人员来说,要跟上新功能发布的最新信息将是一项艰巨的任务。本…...
贪心算法之重叠区间问题
以下四个题都是重叠区间问题 452. 用最少数量的箭引爆气球 为了让气球尽可能重叠,先按照气球起始位置由大到小排序tips:sort默认就可以实现以上排序,不需要写cmp重点:当下一个气球的左边界不小于上一个气球的右边界时(即有重叠的…...
Python爬虫入门教程(非常详细)适合零基础小白
一、什么是爬虫? 1.简单介绍爬虫 爬虫的全称为网络爬虫,简称爬虫,别名有网络机器人,网络蜘蛛等等。 网络爬虫是一种自动获取网页内容的程序,为搜索引擎提供了重要的数据支撑。搜索引擎通过网络爬虫技术,将…...
ArcGIS Pro基础:软件的常用设置:中文语言、自动保存、默认底图
上图所示,在【选项】(Options)里找到【语言】设置,将语言切换为中文选项,记得在安装软件时,需要提前安装好ArcGIS语言包。 上图所示,在【选项】里找到【编辑】设置,可以更改软件默认…...
依赖注入+中央事件总线:Vue 3组件通信新玩法
🌈个人主页:前端青山 🔥系列专栏:Vue篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vue篇专栏内容:Vue-依赖注入-中央事件总线 目录 中央事件总线使用 依赖注入使用 总结 中央事件总线 依赖注入…...
EasyCVR视频汇聚平台构建远程安防监控:5大亮点解析,助力安防无死角
随着科技的飞速发展,远程安防监控系统已经成为现代社会中不可或缺的一部分,无论是在小区、公共场所还是工业领域,安防监控都发挥着至关重要的作用。而EasyCVR作为一款功能强大的视频监控综合管理平台,其在构建远程安防监控系统方面…...
fastadmin安装插件报500的错误
项目场景: 项目新建后,想在本地项目中安装相关的插件,但是在插件管理页面点击安装的时候一直报500的错误。 问题描述 我们将项目中的调试打开,在application/config.php里修改 app_debug,将false改为true,…...
速盾:为什么需要服务器和cdn?
在互联网时代,服务器和CDN(内容分发网络)起着非常重要的作用。它们是实现高效、稳定和可靠网络服务的关键组成部分。下面我将详细阐述为什么需要服务器和CDN。 首先,服务器是互联网上存储、处理和传输数据的中心枢纽。当我们在浏…...
十四、模拟实现 list 类
Ⅰ . list 基本框架的实现 01 结点的建立 为了实现链表,我们首先要做的应该是建立结点 为了和真正的 list 进行区分,我们仍然在自己的命名空间内实现 代码实现: namespace yxt {// 建立结点template<class T>struct ListNode{T _d…...
JavaScript简介之引入方式
JavaScript 引入方式 提问:CSS的引入方式?在学习 JavaScript 语法之前,我们首先要知道在哪里写 JavaScript 才行。想要在 HTML 中引入 JavaScript,一般有 3 种方式。 外部 JavaScript 内部 JavaScript 元素事件 JavaScript&#…...