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参数