【Vue3】编程式路由导航
- 背景
- 简介
- 开发环境
- 开发步骤及源码
- 总结
背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍 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传参写法基本类似。