Vue實現(xiàn)路由傳參的四種方式
更新時間：2025年09月05日 08:49:16 作者：前端小巷子
在單頁應(yīng)用里,路由是連接頁面與數(shù)據(jù)的橋梁,Vue Router 提供了四種方式把「參數(shù)」從地址欄、內(nèi)存甚至編譯期注入到組件,理解它們的差異,才能在面試和線上故障中游刃有余,下面小編為大家詳細(xì)介紹一下
在單頁應(yīng)用里，路由是連接頁面與數(shù)據(jù)的橋梁。Vue Router 提供了四種方式把「參數(shù)」從地址欄、內(nèi)存甚至編譯期注入到組件。理解它們的差異，才能在面試和線上故障中游刃有余。
一、路徑參數(shù)
把參數(shù)寫進(jìn)路徑，直觀且 SEO 友好。
// router.js
{ path: '/user/:userId', component: User }
訪問 /user/42，組件內(nèi)部：
const route = useRoute() console.log(route.params.userId) // '42'
- 優(yōu)點：可收藏、可分享、可被搜索引擎收錄。
- 注意：使用正則捕獲可限制類型，如
:userId(\\d+)只接受數(shù)字。
二、查詢參數(shù)
問號后的 key=value 對，天然支持多值與可選。
router.push({ path: '/user', query: { id: 42, tab: 'profile' } })
組件讀?。?/p>
const route = useRoute() console.log(route.query.tab) // 'profile'
- 場景：分頁、篩選、彈窗狀態(tài)。
- 陷阱：刷新頁面后仍然存在，敏感信息需加密。
三、路由狀態(tài)參數(shù)
state 不會出現(xiàn)在 URL，適合臨時或敏感數(shù)據(jù)。
router.push({ path: '/confirm', state: { orderId: 'xxx' } })
組件讀取：
import { useHistoryState } from '@vueuse/core'
console.log(history.state.orderId) // 'xxx'
- 特性：刷新即消失，同源安全；常用于「下一步」導(dǎo)流。
- 限制：SSR 場景下為空，因為服務(wù)端沒有瀏覽器 history。
四、路由 Props
把路徑或查詢自動映射為組件 Props，告別 $route 依賴。
{ path: '/user/:id', component: User, props: true }
組件直接：
<script setup> const props = defineProps(['id']) </script>
- 進(jìn)階：傳入函數(shù)可實現(xiàn)自定義映射，如把查詢映射為對象。
- 測試：單元測試無需 mock
$route，直接傳 Props。
總結(jié)
路徑參數(shù)讓 URL 會說話，查詢參數(shù)讓 URL 會傳表，狀態(tài)參數(shù)讓內(nèi)存做快遞，Props 讓組件零耦合。掌握四種姿勢，Vue 路由從此游刃有余。
到此這篇關(guān)于Vue實現(xiàn)路由傳參的四種方式的文章就介紹到這了,更多相關(guān)Vue路由傳參方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue踩坑記之npm?install報錯問題解決總結(jié)
當(dāng)你跑起一個項目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報錯問題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
文章講解了如何在Vue項目中使用CSS變量,包括動態(tài)計算值和根據(jù)條件計算屬性,通過示例展示了如何使用CSS變量來實現(xiàn)動畫效果和動態(tài)樣式2025-12-12
我們在前端開發(fā)中經(jīng)常看到:visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時候，里面有個彈窗el-dialog組件的時候會有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
下面小編就為大家分享一篇解決vue多個路由共用一個頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vite打包項目時,需要去除開發(fā)時加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時去除console的方法實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-08-08
vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了基于Vue ECharts簡易實現(xiàn)雷達(dá)圖,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
watch?的本質(zhì)就是觀測一個響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時通知并執(zhí)行相應(yīng)的回調(diào)函數(shù)。watch的實現(xiàn)利用了effect?和?options.scheduler?選項，這篇文章主要介紹了Vue3源碼分析偵聽器watch的實現(xiàn)原理,需要的朋友可以參考下2022-08-08
vue實現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vuejs事件中心管理組件間的通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08