快捷導(dǎo)航

uni-app頁面?zhèn)鲄⒖倎G值的3種解決方法

更新時(shí)間：2025年12月19日 08:26:27 作者：漁_

文章介紹了三種在前端頁面間傳遞參數(shù)的方法：URL傳參、全局變量傳參和本地存儲(chǔ)傳參,每種方法都有其適用場(chǎng)景和注意事項(xiàng),需要的朋友可以參考下

方法 1：URL 傳參（簡(jiǎn)單值首選）

適合傳字符串、數(shù)字這類簡(jiǎn)單數(shù)據(jù)，直接拼在跳轉(zhuǎn)路徑后面

// 跳轉(zhuǎn)頁傳參
uni.navigateTo({
  url: `/pages/detail/detail?id=1&name=測(cè)試`
});

// 接收頁取值（onLoad 生命周期里）
onLoad(options) {
  console.log(options.id); // 1
  console.log(options.name); // 測(cè)試
}

注意：傳對(duì)象會(huì)自動(dòng)轉(zhuǎn)字符串，復(fù)雜數(shù)據(jù)別用這個(gè)！

方法 2：全局變量傳參（復(fù)雜數(shù)據(jù)首選）

在 App.vue 里定義全局變量，適合傳對(duì)象、數(shù)組

// App.vue 定義
export default {
  globalData: {
    userInfo: {}
  }
}

// 跳轉(zhuǎn)頁存數(shù)據(jù)
getApp().globalData.userInfo = { id: 1, name: "測(cè)試" };
uni.navigateTo({ url: `/pages/detail/detail` });

// 接收頁取數(shù)據(jù)
onLoad() {
  const user = getApp().globalData.userInfo;
  console.log(user); // 完整對(duì)象
}

方法 3：本地存儲(chǔ)傳參（跨頁面持久化）

需要數(shù)據(jù)持久化（比如重啟 APP 還在）就用這個(gè)，存到本地緩存里

// 跳轉(zhuǎn)頁存數(shù)據(jù)
uni.setStorageSync("orderData", { id: 1, price: 99 });
uni.switchTab({ url: `/pages/order/order` });

// 接收頁取數(shù)據(jù)
onShow() {
  const order = uni.getStorageSync("orderData");
  console.log(order);
  // 用完可以刪掉，避免占用緩存
  uni.removeStorageSync("orderData");
}

避坑提醒：