【Vue3】路由Query传参
- 背景
- 简介
- 开发环境
- 开发步骤及源码
- 总结
背景
随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中路由传递 Query 参数的方法。
Query 参数是通过 URL 传递的数据，即 URL 中问号（?）后面的键值对，通常用于传递较小的数据，如搜索关键字、过滤条件等。
Vue3 可以使用 模板字符串 或 对象 传递 Query 参数。
开发环境
| 分类 | 名称 | 版本 |
|---|---|---|
| 操作系统 | Windows | Windows 11 |
| IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
1> 在 【Vue3】命名路由 基础上新增一个页面组件 WarnDetail 用于接收路由传递的 Query 参数。
<template>
<div class="detail">
<h3>告警详情</h3>
<div>上报时间：{{ route.query.time }}</div>
<div>
告警级别：
<span v-if="route.query.level == '1'" class="warn-level warn-level-1">一级</span>
<span v-else-if="route.query.level == '2'" class="warn-level warn-level-2">二级</span>
<span v-else-if="route.query.level == '3'" class="warn-level warn-level-3">三级</span>
<span v-else-if="route.query.level == '4'" class="warn-level warn-level-4">四级</span>
</div>
<div>告警信息：{{ route.query.msg }}</div>
</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = 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>
2> 修改 src/router/index.ts，在 /system/warn 下增加一级子路由配置，指向新增的页面组件 WarnDetail。
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: 'WarnDetail',
path: 'detail',
component: WarnDetail
}
]
}
]
},
{
path: '/about',
component: About
}
]
})
export default router
3> 修改 src/pages/Warn.vue，使用模板字符串传递 Query 参数。
<template>
<div class="warn">
<div class="timeline">
<h3>告警发生时间</h3>
<ul>
<li v-for="warn in warns" :key="warn.id">
<RouterLink :to="`/system/warn/detail?time=${warn.time}&msg=${warn.msg}&level=${warn.level}`">
{{ 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>
4> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/，点击左侧菜单进入 系统管理 页面，点击顶部 告警 按钮进入告警页面，点击告警页面左侧 告警发生时间 查看右侧的 告警详情，已成功显示路由传递的 Query 参数。
5> 修改 src/pages/Warn.vue，改为使用对象传递 Query 参数。
<template>
<div class="warn">
<div class="timeline">
<h3>告警发生时间</h3>
<ul>
<li v-for="warn in warns" :key="warn.id">
<RouterLink
:to="{
path: '/system/warn/detail',
query: {
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>
6> 浏览器刷新访问：http://localhost:5173/，路由传参效果与之前一致。
7> 修改 src/pages/WarnDetail.vue，通过解构优化参数接收。
<template>
<div class="detail">
<h3>告警详情</h3>
<div>上报时间：{{ query.time }}</div>
<div>
告警级别：
<span v-if="query.level == '1'" class="warn-level warn-level-1">一级</span>
<span v-else-if="query.level == '2'" class="warn-level warn-level-2">二级</span>
<span v-else-if="query.level == '3'" class="warn-level warn-level-3">三级</span>
<span v-else-if="query.level == '4'" class="warn-level warn-level-4">四级</span>
</div>
<div>告警信息：{{ query.msg }}</div>
</div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue';
import { useRoute } from 'vue-router'
const { query } = 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>
总结
Vue3 路由传递 Query 参数的注意点：
- 传参组件可以使用 模板字符串 或 对象 两种方式传递 Query 参数，其中 对象 传参方式代码可读性更好；
- 接收参数的组件调用
vue-router组件的useRoute()方法接收路由对象，其中的query属性即路由传递的 Query 参数。
