uni-app界面之间的传参

土拨鼠的博客

已于 2022-06-30 10:08:51 修改

阅读量2.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： vue html

于 2020-08-01 17:21:31 首次发布

本文链接：https://blog.csdn.net/weixin_43295498/article/details/107733510

uni-app 专栏收录该内容

14 篇文章

订阅专栏

本文介绍在uni-app中如何在页面跳转时传递参数，包括字符串和复杂对象的编码与解码方法，以及在目标页面如何正确接收和解析这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在进行页面的跳转的时候，往往需要我们将一些参数携带着传递过去

这里的class样式使用的是uni.css的ui库
template

<template>
  <view>
    <view class="content">
      <view class="uni-list">
        <!-- 传简单字符串 -->
        <view @click="navigateTo(item)" class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
          <view class="uni-list-cell-navigate uni-navigate-right">
            {{item}}
          </view>
        </view>
        <!-- 在传递大量参数时，推荐用此方法 -->
        <view @click="goInfo(info)">传对象</view>
      </view>
    </view>
  </view>
</template>

data

data() {
  return {
    list: ["我是第一个", "我是第二个", "我是第三个"],
    info: {
      name: '小明',
      age: 18,
      gender: '男'
    }
  }
},

methods

methods: {
  navigateTo(e) {
    // 传简单字符串
    uni.navigateTo({
      url: '/pages/example/details?data=' + e	//界面传值
    })
  },
  goInfo(e){
    // 传复杂对象-将对象进行encodeURIComponent编码
    let item = encodeURIComponent(JSON.stringify(e)),
    uni.navigateTo({
      url: '/pages/example/details?item=' + item
    })
  }
}

第二个界面接收上一个界面传过来的值

data() {
  return {
    data: "",
    userinfo: null
  }
},
onLoad(option) {	
  // 接收上一个界面传过来的值
  // 这里需要明白的是option 是一个对象
  // 将我们传递过来的参数进行了序列化
  // 可以使用实例代码的格式进行提取。

  // 接收简单字符串
  if (option.data) {
    this.$set(this, 'data', option.data)
  }
  
  // 接收复杂对象-进行解码
  if (option.item) {
    let info = JSON.parse(decodeURIComponent(option.item));
    this.$set(this, 'userinfo', info)
    // 输出结果
    // {name: '小明', age: 18, gender: '男'}
  }
},