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