【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>）声明式导航一致。

总结

编程式路由导航实现：

1. 在需要实现路由功能的组件（本例中的 Warn.vue）中引入 vue-router 的 useRouter 方法；

   import { useRouter } from 'vue-router'
   

2. 调用 useRouter() 获取路由器对象；

   const router = useRouter()
   

3. 调用路由器对象的 push 方法实现路由导航功能，push 方法的参数与组件 <RouterLink> 的 to 属性写法保持一致，即组件 <RouterLink> 的 to 属性写法同样适用于路由器对象的 push 方法；

   router.push({name: 'SystemWarnDetail',params: {time: warn.time,level: warn.level,msg: warn.msg}})
   

4. 本文只展示了路由 params 传参，query 传参写法基本类似。