关于uni-app:uniapp使用uninavigateTo进行页面传值

1. 开发环境 uni-app+uview
2. 电脑系统 windows10 专业版
3. 在应用 uni-app+uview 开发的过程中, 咱们分享一下 uni.navigateTo 办法进行页面传值, 心愿对你有所帮忙! 若有不对的中央, 请多多指教!
4. 废话不多说, 间接上代码, 在 template 中增加如下代码:

<view class="chenwtdadd">
    <u-form :model="chenwtdaddform" ref="chenwtdaddform" id="chenwtdaddform">
      <u-form-item label="委托单号:"
        ><u-input v-model="chenwtdaddform.wtdh"
      /></u-form-item>
      <u-form-item label="委托人:"
        ><u-input v-model="chenwtdaddform.wtpeople"
      /></u-form-item>
      <u-form-item label="联系电话:"
        ><u-input v-model="chenwtdaddform.wtpeoplephone"
      /></u-form-item>
      <u-form-item label="样品名称:"
        ><u-input v-model="chenwtdaddform.wtypname"
      /></u-form-item>
      <u-form-item label="样品条码:"
        ><u-input v-model="chenwtdaddform.wtyptm"
      /></u-form-item>
      <u-form-item label="委托日期:">
        <u-calendar
          v-model="chenwtdaddform.show"
          :mode="chenwtdaddform.mode"
          @change="change"
        ></u-calendar>
        <u-input v-model="chenwtdaddform.content" @click="chenformdate" />
      </u-form-item>
      <u-form-item label="委托地址:">
        <u-select
          v-model="chenwtdaddform.show2"
          mode="mutil-column-auto"
          :list="list"
          @confirm="confirm"
        ></u-select>
        <u-input v-model="chenwtdaddform.addresscon" @click="chenformaddress" />
      </u-form-item>
      <u-form-item label="备注:">
        <u-input v-model="chenwtdaddform.bt" />
        <!-- <textarea rows="20"  /> -->
      </u-form-item>
    </u-form>
    <view class="chensubmit">
      <u-button shape="square" :ripple="true" ripple-bg-color="#909399" @click="chensubmit"
        > 提交 </u-button
      >
    </view>
  </view>

5. 在 return 中增加如下代码:

return {
          list: [
          {
            value: 1,
            label: "中国",
            children: [
              {
                value: 2,
                label: "广东",
                children: [
                  {
                    value: 3,
                    label: "深圳",
                  },
                  {
                    value: 4,
                    label: "广州",
                  },
                ],
              },
              {
                value: 5,
                label: "广西",
                children: [
                  {
                    value: 6,
                    label: "南宁",
                  },
                  {
                    value: 7,
                    label: "桂林",
                  },
                ],
              },
            ],
          },
          {
            value: 8,
            label: "美国",
            children: [
              {
                value: 9,
                label: "纽约",
                children: [
                  {
                    value: 10,
                    label: "皇后街区",
                  },
                ],
              },
            ],
          },
        ],
        chenwtdaddformObj:{
          mode: "range",
          show: false,
          show2: false,
        } ,
      chenwtdaddform: {
        wtdh: "",
        wtpeople: "",
        wtpeoplephone: "",
        wtypname: "",
        wtyptm: "",
        bt: "",
        content: "",
        addresscon: "",   
        mode: "range",
        show: false,
        show2: false, 
      },
    };

6. 效果图如下:

7. 增加提交事件 在 methods 中增加如下代码:

chensubmit(){
      uni.navigateTo({url: "../../pages/entrustchenck/entrustchenck?chenwtdaddformObj="+this.chenwtdaddform,});
    }
    

 在承受页面成果如下, 这个必定不是咱们想要的后果 

8. 批改 提交的办法, 批改 chensubmit 办法 代码如下:

chensubmit(){console.log(this.chenwtdaddform);
      let chenwtdaddformObj=encodeURIComponent(JSON.stringify(this.chenwtdaddform));
      uni.navigateTo({url: "../../pages/entrustchenck/entrustchenck?chenwtdaddformObj="+chenwtdaddformObj,});
    }

9. 在承受的页面 也就是:entrustchenck/entrustchenck.vue 中在 onLoad 中增加如下代码:

onLoad(options) {console.log("已加载就触发 9999");
    console.log(options.chenwtdaddformObj);
    let chenoptionObj=JSON.parse(decodeURIComponent(options.chenwtdaddformObj));
    console.log(chenoptionObj);
  },

10. 承受页面, 输入后果为:

11. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 在成长的路线上心愿你不要认输, 不要抬头, 不要放弃, 让咱们一起致力走向巅峰!