【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 传参写法基本类似。