背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍 Vue3 路由编程式导航的用法。
编程式路由导航可以通过代码实现页面跳转,与组件(<RouterLink>
)声明式导航不同。编程式路由导航的灵活度更高。
开发环境
分类 | 名称 | 版本 |
---|---|---|
操作系统 | Windows | Windows 11 |
IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
1> 在 【Vue3】配置路由规则props 基础上,基于 params
传参,修改 src/pages/Warn.vue
,使用编程式导航替代组件(<RouterLink>
)声明式导航。
<template>
<div class="warn">
<div class="timeline">
<h3>告警发生时间</h3>
<ul>
<li v-for="warn in warns" :key="warn.id" @click="viewWarnDetail(warn)">
{{ warn.time }}
</li>
</ul>
</div>
<div class="warn-detail">
<RouterView />
</div>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter, 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 }
])
const router = useRouter()
function viewWarnDetail(warn: any) {
router.push({
name: 'SystemWarnDetail',
params: {
time: warn.time,
level: warn.level,
msg: warn.msg
}
})
}
</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>
2> 执行命令 npm run dev
启动应用,浏览器访问:http://localhost:5173/
,点击左侧菜单进入 系统管理
页面,点击顶部 告警
按钮进入告警页面,点击告警页面左侧 告警发生时间
查看右侧的 告警详情
,路由导航效果与组件(<RouterLink>
)声明式导航一致。
总结
编程式路由导航实现:
- 在需要实现路由功能的组件(本例中的
Warn.vue
)中引入vue-router
的useRouter
方法;import { useRouter } from 'vue-router'
- 调用
useRouter()
获取路由器对象;const router = useRouter()
- 调用路由器对象的
push
方法实现路由导航功能,push
方法的参数与组件<RouterLink>
的to
属性写法保持一致,即组件<RouterLink>
的to
属性写法同样适用于路由器对象的push
方法;router.push({ name: 'SystemWarnDetail', params: { time: warn.time, level: warn.level, msg: warn.msg } })
- 本文只展示了路由
params
传参,query
传参写法基本类似。