栽Vue3中傳遞路由參數(shù)的三種方式
更新時(shí)間：2024年07月31日 09:39:57 作者：ksuper&
vue 路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),傳參方式可劃分為 params 傳參和 query 傳參,本文將給大家介紹如何通過不同方式在 Vue 3 中傳遞路由參數(shù),需要的朋友可以參考下
如何通過不同方式在 Vue 3 中傳遞路由參數(shù)，并在組件中使用 defineProps 或其他組合式 API 獲取這些參數(shù)？
1. 通過 path 參數(shù)傳遞
最常見的方式，通過在路由路徑中定義動(dòng)態(tài)參數(shù)，并在路由配置中設(shè)置 props: true，將參數(shù)作為 props 傳遞給組件。
路由配置
{
path: '/:projectId(\\d+)/report/calc/:reportId(\\d+)',
name: 'CreateCalcPage',
component: () => import('@/pages/report/calc.vue'),
props: true, // 通過 props 傳遞路由參數(shù)
}
組件中使用 defineProps
<template>
<div>
<p>Project ID: {{ projectId }}</p>
<p>Report ID: {{ reportId }}</p>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
projectId: {
type: String,
required: true,
},
reportId: {
type: String,
required: true,
},
});
</script>
2. 通過 query 參數(shù)傳遞
可以通過 query 參數(shù)傳遞數(shù)據(jù)。在這種情況下，需要手動(dòng)從 route 對(duì)象中獲取參數(shù)。
路由跳轉(zhuǎn)
router.push({
name: 'CreateCalcPage',
query: {
projectId: '123',
reportId: '456',
},
});
組件中使用 useRoute
<template>
<div>
<p>Project ID: {{ projectId }}</p>
<p>Report ID: {{ reportId }}</p>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const projectId = route.query.projectId;
const reportId = route.query.reportId;
</script>
3. 通過 props 選項(xiàng)傳遞
可以在路由配置中使用 props 選項(xiàng)來傳遞靜態(tài)或動(dòng)態(tài)參數(shù)。
靜態(tài)參數(shù)
{
path: '/report/calc',
name: 'CreateCalcPage',
component: () => import('@/pages/report/calc.vue'),
props: { projectId: '123', reportId: '456' },
}
動(dòng)態(tài)參數(shù)
{
path: '/report/calc',
name: 'CreateCalcPage',
component: () => import('@/pages/report/calc.vue'),
props: route => ({ projectId: route.query.projectId, reportId: route.query.reportId }),
}
組件中使用 defineProps
<template>
<div>
<p>Project ID: {{ projectId }}</p>
<p>Report ID: {{ reportId }}</p>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
projectId: {
type: String,
required: true,
},
reportId: {
type: String,
required: true,
},
});
</script>
總結(jié)
- 通過
path參數(shù)傳遞：在路由路徑中定義動(dòng)態(tài)參數(shù)，并使用props: true將其作為 props 傳遞。 - 通過
query參數(shù)傳遞：在路由跳轉(zhuǎn)時(shí)通過query參數(shù)傳遞數(shù)據(jù)，并在組件中使用useRoute獲取。 - 通過
props選項(xiàng)傳遞：在路由配置中使用props選項(xiàng)傳遞靜態(tài)或動(dòng)態(tài)參數(shù)。
到此這篇關(guān)于栽Vue3中傳遞路由參數(shù)的三種方式的文章就介紹到這了,更多相關(guān)Vue3傳遞路由參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
單文件就是把一個(gè)頁面拆分為多個(gè),多層次的組件,通過多層引用,大大縮小vue文件的長(zhǎng)度和頁面復(fù)雜度,下面這篇文章主要給大家介紹了關(guān)于vue3單文件組件中style特性的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue+阿里的G2圖表-antv+折線圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
VUE響應(yīng)式原理的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了VUE響應(yīng)式原理的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
關(guān)于axios配置請(qǐng)求頭content-type實(shí)例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請(qǐng)求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
vue中uni-app 實(shí)現(xiàn)小程序登錄注冊(cè)功能
這篇文章主要介紹了uni-app 實(shí)現(xiàn)小程序登錄注冊(cè)功能,文中給大家介紹了實(shí)現(xiàn)思路，以及vuex和本地緩存的區(qū)別，需要的朋友可以參考下2019-10-10
element-ui 中的 loading 加載功能,默認(rèn)是全屏加載效果,設(shè)置局部,需要自定義樣式或者修改樣式,下面給大家分享實(shí)例代碼,感興趣的朋友跟隨小編一起看看吧2024-05-05
使用vue實(shí)現(xiàn)HTML頁面生成圖片的方法
這篇文章主要介紹了使用vue實(shí)現(xiàn)HTML頁面生成圖片的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue移動(dòng)端UI框架實(shí)現(xiàn)QQ側(cè)邊菜單組件
這篇文章主要介紹了vue移動(dòng)端UI框架實(shí)現(xiàn)仿qq側(cè)邊菜單組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
本文主要介紹了Vue的基本應(yīng)用。具有一定的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要介紹了Vue的三種路由模式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03