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

【Vue3】路由Params传参

【Vue3】路由Params传参

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码
  • 总结

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中路由传递 Params 参数的方法。

Params 参数是通过 URL 路径的一部分传递的数据,通常用于标识资源的唯一性或层级关系,如 http://demo.net/user/1 中的 1 便是一个 Params 参数,通常表示系统用户 ID。Params 参数常用于 RESTful 风格 API 中。

Vue3 可以使用 模板字符串对象 传递 Params 参数。

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.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 参数。
http://www.lryc.cn/news/427288.html

相关文章:

  • 授权cleanmymac访问全部磁盘 Mac授权访问权限 cleanmymac缺少权限
  • Ubuntu/18.04 LTS下编译 BoringSSL 库
  • 【stm32项目】多功能智能家居室内灯光控制系统设计与实现(完整工程资料源码)
  • xss靶场详解
  • 华为的流程管理
  • 操作系统Linux
  • 1、.Net UI框架:MAUI - .Net宣传系列文章
  • Spring boot 使用 jSerialComm 对串口使用发送信息并接收
  • 江协科技STM32学习笔记(第10章 SPI通信)
  • 力扣热题100_回溯_22_括号生成
  • 【k8s】ubuntu24.04 containerd 手动从1.7.15 换为1.7.20
  • Java二十三种设计模式-备忘录模式(19/23)
  • js一些杂乱理解
  • 机器学习 之 线性回归算法
  • ThreadLoad如何防止内存溢出
  • 2024.8.19 学习记录 —— 作业
  • Java 阿里云视频直播开发流程
  • SQLite 轻量级的嵌入式关系型数据库的替代软件
  • Flutter-自适用高度PageView
  • 群晖NAS本地搭建可远程交互的大型语言模型LLM聊天机器人
  • TypeScript 构建工具之 webpack
  • conda环境下在pycharm中调试scrapy项目
  • contenteditable=“true“的标签限制字数的时候修改光标位置
  • 51单片机-LED灯蜂鸣器数码管按键DS18B20温度传感器
  • 笔记本一线品牌有哪些
  • mysql聚合函数和分组
  • ubuntu20.04+RealSenseD455
  • WAF绕过技巧
  • HarmonyOS应用三之组件生命周期和参数传递
  • [Qt][Qt 网络][上]详细讲解