uni-app界面之间的传参

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

这里的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: '男'}
  }
},

如果看不懂，那咱来点实际的直接上图：
index.vue

details.vue

如有问题，欢迎留言！！