关于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,心愿对你有所帮忙,在成长的路线上心愿你不要认输,不要抬头,不要放弃,让咱们一起致力走向巅峰!