在uniapp中,路由傳參的方式有以下幾種:
query傳參:通過在url中添加查詢參數,例如/pages/home/home?param1=value1¶m2=value2
,在目標頁面可以通過this.$route.query
獲取參數。
params傳參:通過在url中添加路徑參數,例如/pages/home/home/param1/param2
,在目標頁面可以通過this.$route.params
獲取參數。
props傳參:在路由配置中使用props: true
,然后在目標頁面通過props接收參數。例如:
// 路由配置
{
path: '/pages/home/home',
name: 'home',
component: Home,
props: true
}
<!-- 目標頁面 -->
<template>
<div>{{ param1 }}</div>
</template>
<script>
export default {
props: {
param1: String
}
}
</script>
eventBus傳參:使用事件總線,在源頁面觸發事件并傳遞參數,在目標頁面接收事件并獲取參數。例如:
// 在源頁面中
this.$eventBus.$emit('eventName', param);
// 在目標頁面中
this.$eventBus.$on('eventName', (param) => {
// 處理參數
});
Vuex傳參:使用全局狀態管理,在源頁面通過Vuex存儲參數,在目標頁面通過Vuex獲取參數。
以上是uniapp中常用的路由傳參方式,可以根據具體的場景選擇合適的方式。