背景

隨著年齡的增長，很多曾經(jīng)爛熟于心的技術(shù)原理已被歲月摩擦得愈發(fā)模糊起來，技術(shù)出身的人總是很難放下一些執(zhí)念，遂將這些知識整理成文，以紀(jì)念曾經(jīng)努力學(xué)習(xí)奮斗的日子。本文內(nèi)容并非完全原創(chuàng)，大多是參考其他文章資料整理所得，感謝每位技術(shù)人的開源精神。

簡介

本文介紹 Vue3 中路由傳遞 Params 參數(shù)的方法。

Params 參數(shù)是通過 URL 路徑的一部分傳遞的數(shù)據(jù)，通常用于標(biāo)識資源的唯一性或?qū)蛹夑P(guān)系，如 http://demo.net/user/1 中的 1 便是一個 Params 參數(shù)，通常表示系統(tǒng)用戶 ID。Params 參數(shù)常用于 RESTful 風(fēng)格 API 中。

Vue3 可以使用 模板字符串 或 對象 傳遞 Params 參數(shù)。

開發(fā)環(huán)境

分類	名稱	版本
操作系統(tǒng)	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

開發(fā)步驟及源碼

1> 在 【Vue3】路由Query傳參 基礎(chǔ)上修改 src/router/index.ts，將 /system/warn/detail 路由配置由 Query 傳參修改為 Params 傳參。

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: 'SystemWarnDetail',path: 'detail/:time/:level/:msg',component: WarnDetail}]}]},{path: '/about',component: About}]
})export default router

2> 修改 src/pages/Warn.vue，使用對象傳遞 Params 參數(shù)。

<template><div class="warn"><div class="timeline"><h3>告警發(fā)生時間</h3><ul><li v-for="warn in warns" :key="warn.id"><RouterLink :to="{name: 'SystemWarnDetail',params: {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": "服務(wù)XX升級失敗回退", "level": 1 },{ "id": 8, "time": "2024/08/15 23:58:41", "msg": "服務(wù)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": "服務(wù)XX無法恢復(fù)", "level": 1 },{ "id": 5, "time": "2024/08/15 15:14:39", "msg": "服務(wù)XX異常重啟", "level": 2 },{ "id": 4, "time": "2024/08/13 01:05:17", "msg": "請求處理失敗數(shù)超閾值XX", "level": 2 },{ "id": 3, "time": "2024/08/12 22:31:26", "msg": "服務(wù)XX持續(xù)上報告警", "level": 4 },{ "id": 2, "time": "2024/08/12 14:22:54", "msg": "消息隊(duì)列積壓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>

3> 修改 src/pages/WarnDetail.vue 接收路由傳遞的 Params 參數(shù)。

<template><div class="detail"><h3>告警詳情</h3><div>上報時間：{{ params.time }}</div><div>告警級別：<span v-if="params.level == '1'" class="warn-level warn-level-1">一級</span><span v-else-if="params.level == '2'" class="warn-level warn-level-2">二級</span><span v-else-if="params.level == '3'" class="warn-level warn-level-3">三級</span><span v-else-if="params.level == '4'" class="warn-level warn-level-4">四級</span></div><div>告警信息：{{ params.msg }}</div></div>    
</template><script setup lang="ts">
import { toRefs } from 'vue';
import { useRoute } from 'vue-router'const { params } = 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>

4> 執(zhí)行命令 npm run dev 啟動應(yīng)用，瀏覽器訪問：http://localhost:5173/，點(diǎn)擊左側(cè)菜單進(jìn)入 系統(tǒng)管理 頁面，點(diǎn)擊頂部 告警 按鈕進(jìn)入告警頁面，點(diǎn)擊告警頁面左側(cè) 告警發(fā)生時間 查看右側(cè)的 告警詳情，已成功顯示路由傳遞的 Params 參數(shù)。

5> 本示例不能使用 模板字符串 傳參方式，因?yàn)閭鬟f的數(shù)據(jù) warn.time 中包含 /，這會導(dǎo)致 URL 解析錯誤，出現(xiàn)如下提示。

因此 模板字符串 只適用于傳遞不含特定字符的簡單數(shù)據(jù)，感興趣的可將本示例中的 warn.time 從傳遞的數(shù)據(jù)中去掉后嘗試使用 模板字符串。

總結(jié)

Vue3 路由傳遞 Params 參數(shù)的注意點(diǎn)：

• 傳參組件可以使用 模板字符串 或 對象 兩種方式傳遞 Params 參數(shù)，其中 對象 傳參方式代碼可讀性更好，且當(dāng)傳遞的數(shù)據(jù)中包含 / 等字符時，使用 模板字符串 傳遞會遇到 URL 解析錯誤，所以建議統(tǒng)一使用 對象 傳參方式；
• 對象 傳參必須使用命名路由，即 <RouterLink> 組件的 to 屬性接收的對象參數(shù)必須使用 name 指定路由，不能使用 path 指定路由；
• 接收參數(shù)的組件調(diào)用 vue-router 組件的 useRoute() 方法接收路由對象，其中的 params 屬性即路由傳遞的 Params 參數(shù)。