uniapp页面怎么传参?

在uni-app中,页面之间传递参数可以通过 URL 参数、Vuex 状态管理、本地存储等方式实现。以下是一些常见的方法:

  1. URL 参数 :你可以在跳转到目标页面时,在 URL 中附加参数,然后在目标页面通过 this.$route.query 获取参数。例如:

    javascript 复制代码
    // 在源页面跳转到目标页面时传递参数
    uni.navigateTo({
      url: '/pages/targetPage?param1=value1&param2=value2'
    });
    
    // 在目标页面获取参数
    console.log(this.$route.query.param1); // 输出 value1
    console.log(this.$route.query.param2); // 输出 value2
  2. Vuex 状态管理:如果需要在多个页面之间共享参数,可以使用 Vuex 进行状态管理。在源页面设置参数到 Vuex 中,然后在目标页面从 Vuex 中获取参数。

  3. 本地存储:你还可以使用本地存储(如 localStorage 或 uni.setStorageSync)来暂时保存参数,然后在目标页面从本地存储中读取参数。

  4. 事件总线 :你也可以使用事件总线来进行页面间通信,比如使用 $emit$on 方法来传递参数。

相关推荐
Aliex_git8 小时前
跨域请求笔记
前端·网络·笔记·学习
37方寸8 小时前
前端基础知识(Node.js)
前端·node.js
powerfulhell9 小时前
寒假python作业5
java·前端·python
木子啊9 小时前
前端组件化:模板继承拯救发际线
前端
三十_A9 小时前
零基础通过 Vue 3 实现前端视频录制 —— 从原理到实战
前端·vue.js·音视频
前端小菜袅9 小时前
PC端原样显示移动端页面方案
开发语言·前端·javascript·postcss·px-to-viewport·移动端适配pc端
We་ct9 小时前
LeetCode 228. 汇总区间:解题思路+代码详解
前端·算法·leetcode·typescript
爱问问题的小李9 小时前
ue 动态 Key 导致组件无限重置与 API 重复提交
前端·javascript·vue.js
子兮曰9 小时前
深入Vue 3响应式系统:为什么嵌套对象修改后界面不更新?
前端·javascript·vue.js
CHU72903510 小时前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序