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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐