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

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>
    );
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容