在 UniApp 開發中，頁面間參數傳遞是核心功能之一。以下是 8 種常用的傳參方式，每種方式都有其適用場景和特點：

---

一、URL 拼接傳參（最常用）

適用場景：簡單數據傳遞，如 ID、狀態值等基礎類型數據
實現方式：

// 發送參數
uni.navigateTo({url: '/pages/detail/detail?id=123&name=張三'
})// 接收參數（在目標頁面的 onLoad 生命周期中獲取）
export default {onLoad(options) {console.log(options.id)   // 123console.log(options.name) // "張三"}
}

特點：

• 參數自動解析為字符串
• 長度受限（URL 最大長度約 2KB）
• 不支持復雜對象（需手動序列化）

---

二、全局變量傳參

適用場景：跨頁面共享數據（如用戶信息）
實現方式：

// app.vue 中定義全局變量
export default {globalData: {userInfo: null}
}// 頁面 A 設置數據
const app = getApp()
app.globalData.userInfo = { id: 1, name: '張三' }// 頁面 B 讀取數據
const app = getApp()
console.log(app.globalData.userInfo)

特點：

• 適合共享頻繁使用的數據
• 非響應式（需配合事件機制）
• 長期存在可能內存泄漏

---

三、Vuex 狀態管理

適用場景：復雜應用狀態共享
實現方式：

// store.js
export default new Vuex.Store({state: {cartItems: []},mutations: {addToCart(state, item) {state.cartItems.push(item)}}
})// 頁面 A 提交數據
this.$store.commit('addToCart', { id: 101, name: '商品A' })// 頁面 B 獲取數據
computed: {cartItems() {return this.$store.state.cartItems}
}

特點：

• 響應式數據流
• 支持調試工具
• 適合中大型項目

---

四、本地存儲傳參

適用場景：持久化數據傳遞（如登錄狀態）
實現方式：

// 頁面 A 存儲數據
uni.setStorageSync('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9')// 頁面 B 讀取數據
const token = uni.getStorageSync('token')

特點：

• 數據持久化（關閉應用仍存在）
• 同步操作可能阻塞渲染
• 容量限制（通常 5-10MB）

---

五、事件總線（EventBus）

適用場景：任意組件/頁面間通信
實現方式：

// utils/eventBus.js
export default new Vue()// 頁面 A 發送事件
import eventBus from '@/utils/eventBus'
eventBus.$emit('data-update', { newData: 42 })// 頁面 B 監聽事件
export default {onLoad() {eventBus.$on('data-update', data => {console.log('收到數據:', data)})},onUnload() {eventBus.$off('data-update') // 必須解綁！}
}

特點：

• 完全解耦的通信方式
• 需手動管理事件監聽
• 濫用可能導致"事件地獄"

---

六、頁面通信通道

適用場景：需要獲取前序頁面實例的場景
實現方式：

// 獲取前序頁面實例
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2] // 上一頁// 直接調用前頁方法
prevPage.$vm.updateData({ id: 2024 })// 目標頁面定義方法
methods: {updateData(data) {this.data = dataconsole.log('收到數據:', data)}
}

特點：

• 可直接操作頁面實例
• 破壞封裝性（慎用）
• 小程序端最多 10 層頁面棧

---

七、URL 編碼復雜對象

適用場景：需要傳遞 JSON 對象
實現方式：

// 發送復雜對象
const product = {id: 1001,name: '手機',specs: { color: '黑色', memory: '256GB' }
}uni.navigateTo({url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(product))}`
})// 接收端解析
onLoad(options) {const product = JSON.parse(decodeURIComponent(options.data))console.log(product.specs.color) // "黑色"
}

特點：

• 解決 URL 傳對象問題
• 注意特殊字符編碼
• 數據量受限

---

八、uni.$emit和uni.$on

適用場景：跨頁面事件通信（UniApp 2.8.0+）
實現方式：

// 頁面 A 發送事件
uni.$emit('update', { msg: '數據更新' })// 頁面 B 監聽事件
export default {onLoad() {uni.$on('update', this.handleUpdate)},methods: {handleUpdate(data) {console.log('收到更新:', data.msg)}},onUnload() {uni.$off('update', this.handleUpdate) // 必須解綁}
}

特點：

• 官方提供的全局事件機制
• 需手動管理事件綁定
• 適合簡單通知類通信

---

最佳實踐建議

1. 簡單數據傳遞：優先使用 URL 傳參
2. 用戶狀態管理：Vuex + 本地存儲持久化
3. 復雜對象傳遞：URL 編碼或全局變量
4. 跨級通信：EventBus 或 uni.$emit
5. 重要數據傳遞：始終添加參數校驗

// 參數校驗示例
onLoad(options) {if (!options.id || isNaN(options.id)) {uni.showToast({ title: '參數錯誤', icon: 'error' })uni.navigateBack()return}
}

6. 內存管理：在 onUnload 中清理資源

onUnload() {// 清除事件監聽eventBus.$off('update')uni.$off('update')// 釋放大對象this.largeData = null
}

---

性能優化技巧

1. 大數據傳遞：使用 ID 傳遞，目標頁面重新請求
2. 頻繁更新數據：使用 Vuex 響應式更新
3. 頁面返回刷新：

// 前頁注冊刷新方法
onShow() {if (this.$options.refreshData) {this.$options.refreshData()}
}// 后頁觸發刷新
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2].$vm
prevPage.$options.refreshData = () => {console.log('執行刷新操作')
}

根據具體場景選擇合適的傳參方式，可以顯著提升應用的可維護性和性能表現。