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>
    );
  }