美文网首页Taro
taro实战-微信小程序:路由传参

taro实战-微信小程序:路由传参

作者: 逸笛 | 来源:发表于2019-07-15 17:00 被阅读0次

    taro官方文档关于路由传参的记载:


    图片.png

    第一步:绑定要传递的参数


    图片.png

    第二步:携带参数传递到下一级页面

     toList(userId) {
        Taro.navigateTo({
          url: `/pages/person/list?userId=${userId}`
        });
      }
    

    第三步:下级页面接收传递过来的参数

     //接收路由参数,在生命周期函数中获取
      componentWillMount() {
        let userId = this.$router.params.userId;
        this.setState({
          userId: userId
        });
        console.log(userId);
      }
     
    

    第四步:假如还有下下级页面,可以继续传递下去

     handlegoAIO = userId => {
        Taro.navigateTo({
          url: `/pages/mine/my-AIO/my-AIO?userId=${userId}`
        });
      };
      handlegoCuff = userId => {
        Taro.navigateTo({
          url: `/pages/mine/my-cuff/my-cuff?userId=${userId}`
        });
      };
      handlegoUnusual = userId => {
        Taro.navigateTo({
          url: `/pages/mine/my-unusual/my-unusual?userId=${userId}`
        });
      };
    
     render() {
        let { userId } = this.state;
        return (
          <View className='my'>
            <SpaceBar />
            <View className='iconlist'>
              <AtList>
                <AtListItem
                  title='123'
                  arrow='right'
                  onClick={this.handlegoAIO.bind(this, userId)}
                  thumb={url.imgUrl + "images/mine/my/mine_aio.png"}
                />
                <AtListItem
                    title='123'
                  arrow='right'
                  onClick={this.handlegoCuff.bind(this, userId)}
                  thumb={url.imgUrl + "images/mine/my/mine_cuff.png"}
                />
                <AtListItem
                    title='123'
                  arrow='right'
                  onClick={this.handlegoUnusual.bind(this, userId)}
                  thumb={url.imgUrl + "images/mine/my/mine_unusual.png"}
                />
              </AtList>
            </View>
          </View>
        );
      }
    

    相关文章

      网友评论

        本文标题:taro实战-微信小程序:路由传参

        本文链接:https://www.haomeiwen.com/subject/kgonkctx.html