JEECG BOOT 浏览器地址带参数传递 浏览器地址栏查询条件---list页面超链接传递参数到jeecg的页面进行查询

1. 接收端方法

script 标签中 没有setup的 

mounted () {

queryParam.userid = router.currentRoute.value.query.userid;

}

上述代码queryParam是 jeecg 前端查询定义的数据固定写法 

queryParam.userid 查询userid 等于后面的router.currentRoute.value.query.你的变量 

script 标签中 有setup的 

onMounted(() => {

queryParam.userid = router.currentRoute.value.query.userid;
});

此时我们需要引入

import { useRouter } from "vue-router";

import {onMounted} from "vue";

写好后可以在地址栏用参进行访问 ，例如http://localhost:8080/test?userid=1234 这样测试

2.发送方需要定义好插槽

<template #userid="{ record }">

<!-- <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>-->
<router-link :to="{ path: '/test', query: { userid: record.userid }}" >{{record.userid}}</router-link>

</template>

#后面的是插槽对应的key

名词解释  path 写传递的地址，query里面 userid是参数名称冒号后面接具体变量 该插槽写在jeecgboot代码生成的list文件中  一定要写在插槽对应的位置，如果不注意写在from里面就会不生效

为了能让插槽起作用 我们还需要在list数据中进行修改

需要找到data.ts文件

找到对应的代码

{
title: '员工号1',
align: 'center',

dataIndex: 'userid',
slots: { customRender: 'userid' },

},

userid就是 上述代码中提到的key  这样可以让程序知道需要用到的是哪个插槽

通过插槽的方式定义超链接

上述代码就介绍完毕了 如果有写的不清楚的地方请与我联系谢谢

配一下最后的效果

通过这个方法在浏览器地址栏可以传递get参数