uni-app路由传参的方法有很多种,今天介绍根据click事件进行传参,上代码

html部分:

<view
        class="code"
        @click="getdetails(value)"
      >

事件执行部分(传参)

data(){

return{

value:1

}

},

methods:{
      getdetails(type){
          uni.navigateTo({
              url:`./details?type=${type}`
          })
      }
  }

目标路由接收参数

onLoad(e){
      this.state = e.type
  },

这样就简单实现了静态传递参数,也可以试试动态传递参数

动态传递参数

盒子部分:

<view
      class="carbox"
      v-for="item in carList"
      :key="item.type"
      @click="getadd(item.type)"
    >

模拟数据部分:

 data() {
    return {
      carList: [
        {
          flag: "事假",
          tips: "按小时请假",
          type: "01",
     
        },
        {
          flag: "调休",
          tips: "按小时请假",
          type: "02",
        
        },
        {
          flag: "病假",
          tips: "按小时请假",
          type: "03",
         
        },
        {
          flag: "年假",
          tips: "按半天请假",
          type: "04",
          
        },
        {
          flag: "产假",
          tips: "按天请假",
          type: "05",
          
        },
        {
          flag: "陪产假",
          tips: "按天请假",
          type: "06",
          
        },
        {
          flag: "婚假",
          tips: "按天请假",
          type: "07",
          
        },
        {
          flag: "例假",
          tips: "按半天请假",
          type: "08",
        
        },
        {
          flag: "丧假",
          tips: "按天请假",
          type: "09",
          
        },
        {
          flag: "哺乳假",
          tips: "按小时请假",
          type: "10",
         
        },
      ],
    };
  },

发送参数部分:

 getadd(type){
         uni.navigateTo({
             url:`./home?type=${type}`//目标路由
         })
      }

接收参数部分:

onLoad(e){
            this.typeid = e.type
            console.log(this.typeid)
        },

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐