前段查询用户传一个对象后端如何接受

问题遇到的现象和发生背景

前段

<el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
          <el-row>
            <el-col :span=9>
              <el-form-item  label="用户名称" prop="userName">
                <el-input
                  v-model="queryParams.userName"
                  placeholder="请输入用户名称"
                  clearable
                  size="small"
                  style="width: 240px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>

 /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询列表 */
    getList() {
      this.getUserList()
    },
    /** 查询用户列表 */
    getUserList() {
      this.loading = true;
      this.columns = this.userColumns
        if(this.currentRow!==undefined||this.currentRow!=null){
            debugger

            listUserByRole(this.queryParamsByUserName).then(response=>{
                console.log(this.queryParamsByUserName+"queryParamsByUserName")
                this.list = response.rows;
                this.total = response.total;
                this.loading = false;
            })
        }else {
            listUser(this.queryParams).then(response => {

                this.list = response.rows;
                this.total = response.total;
                this.loading = false;
                // this.selection = this.list.find(item => this.customDataForm.C2Back === item.userName)
                // this.toggleSelection([this.selection])
            })
        }

    },

问题相关代码，请勿粘贴截图

 // 查询参数
        queryParamsByUserName: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            roleId: undefined,
        },

后端接

 /**
     * 获取用户列表
     */
    @GetMapping("/lists")
    public TableDataInfo list(@RequestParam(name = "userName" , required = false) String userName,
                              @RequestParam(name = "roleId",required = false) String roleId)
    {
        startPage();
        List<SysUser> list = suYxdgcUserService.selectUsers(userName,roleId);
        return getDataTable(list);
    }

// 查询用户列表
export function listUserByRole(query) {
  return request({
    url: '/approval/user/lists',
    method: 'get',
    params: query
  })
}

运行结果及报错内容

前段如何传一个userName和roleId，然后后端怎么接受
目前我后端的传过来的都是null的
打了debugger也没有接受到

想问问是哪里错了

我的解答思路和尝试过的方法

我想要达到的结果

你的listUserByRole接口是传递的这个对象，这个对象里面的userName和roleId就是你可以传给后台的值。你这里目前设置的是undefined啊。传给后端的话就是null了

 // 查询参数
        queryParamsByUserName: {
            pageNum: 1,
            pageSize: 10,
            userName: undefined,
            roleId: undefined,
        },

感觉主要还是前端传值有问题