点击Tab标签切换不同查询数据,并选择数据存入缓存实现两个界面带参数跳转

项目场景：

在不同的tab标签页中点击不同的标签页查找不同的内容,然后选中其中一个页面中的一条数据将此数据某个信息选中然后存入session缓存当中然后另一个界面从session中取出,从而达到带参数跳转界面的需求

---

问题描述

可以做到跳转界面但是数据会显示到地址栏当中,隐秘性差

---

解决方案：

提示：这里填写该问题的具体解决方案：

一.先是切换标签页的功能

<el-tabs @tab-click="handleClick" v-model="activeNameMain" style="margin-left: 2%;">
							<el-tab-pane label="本人" name="GR"></el-tab-pane>
							<el-tab-pane label="科室" name="KS"></el-tab-pane>
						</el-tabs>

就是在tab标签页设置一个name属性然后赋值,使用点击事件获取这个name属性的值再根据取到的值做判断即可,代码如下:

    //在科患者点击tab导航页查询
            const handleClick = function(tab, event) {
                let date = tab.props.name
                if (date === 'KS') {
                    _this.getZKpatient()
                } else if (date === 'GR') {
                    getZKGRGRpatient()
                }
            }
            //出院患者点击tab导航页查询
            const handleClicks = function(tab, event) {
                let date = tab.props.name
                if (date === 'KSS') {
                    _this.getDispatients()
                } else if (date === 'GRS') {
                    getGRDispatients()
                }

            }

二:将参数写入缓存跳转界面

1.import generateRoute from "@/router/generate.ts";
    import { useRouter } from 'vue-router'

先引入组件

 

2.    //双击跳转界面
            const handleClicker = function(row, event, column) {
                _this.currentRowInedx = row.row_index
                sessionStorage.setItem('ordersPatientId', row.PATIENT_ID)
                sessionStorage.setItem("ordersVisitId", row.VISIT_ID)
                generateRoute(router,"InpDoctor")
                context.emit('eventIsObject', { keyName: '' })

            }

前两步就是写入缓存和跳转界面下面就是另外的界面取出参数

3.import doctorworkbench from "xxxxxxxx.vue"

先将自己的界面引入到另外的界面

4.然后是这样写就可以取出来并赋值了

 patientId:sessionStorage.getItem("ordersPatientId"),
  visitId:sessionStorage.getItem("ordersVisitId")