wordpress没法做大网站,wordpress怎么上传图片,什么网站从做系统,网站建设高效解决之道【Vue3】路由Params传参 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗的日… 【Vue3】路由Params传参 背景简介开发环境开发步骤及源码总结 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中路由传递 Params 参数的方法。
Params 参数是通过 URL 路径的一部分传递的数据通常用于标识资源的唯一性或层级关系如 http://demo.net/user/1 中的 1 便是一个 Params 参数通常表示系统用户 ID。Params 参数常用于 RESTful 风格 API 中。
Vue3 可以使用 模板字符串 或 对象 传递 Params 参数。
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual 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.vueconst 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 router2 修改 src/pages/Warn.vue使用对象传递 Params 参数。
templatediv classwarndiv classtimelineh3告警发生时间/h3ulli v-forwarn in warns :keywarn.idRouterLink :to{name: SystemWarnDetail,params: {time: warn.time,level: warn.level,msg: warn.msg}}{{ warn.time }}/RouterLink/li/ul/divdiv classwarn-detailRouterView //div/div
/templatescript setup langts
import { reactive } from vue
import { RouterLink, RouterView } from vue-routerconst 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 }
])
/scriptstyle scoped langscss
.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;}
}
/style3 修改 src/pages/WarnDetail.vue 接收路由传递的 Params 参数。
templatediv classdetailh3告警详情/h3div上报时间{{ params.time }}/divdiv告警级别span v-ifparams.level 1 classwarn-level warn-level-1一级/spanspan v-else-ifparams.level 2 classwarn-level warn-level-2二级/spanspan v-else-ifparams.level 3 classwarn-level warn-level-3三级/spanspan v-else-ifparams.level 4 classwarn-level warn-level-4四级/span/divdiv告警信息{{ params.msg }}/div/div
/templatescript setup langts
import { toRefs } from vue;
import { useRoute } from vue-routerconst { params } toRefs(useRoute())
/scriptstyle scoped langscss
.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;}}
}
/style4 执行命令 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 参数。
