热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

项目场景:在不同的tab标签页中点击不同的标签页查找不同的内容,然后选中其中一个页面中的一条数据将此数据某个信息选中然后存入session缓存当中然后另一个界面从s

项目场景:

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




问题描述

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




解决方案:


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


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

就是在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")



推荐阅读
  • 本文介绍如何使用 Angular 6 的 HttpClient 模块来获取 HTTP 响应头,包括代码示例和常见问题的解决方案。 ... [详细]
  • 本文探讨了在 Vue 2.0 项目中使用 Axios 获取数据时可能出现的错误,并提供详细的解决方案和最佳实践。 ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 本文详细介绍了如何使用Python通过GET和POST方法发送HTTP请求,并接收HTTP响应的具体实现方法。包括示例代码和相关模块的功能说明。 ... [详细]
  • 本文详细介绍了如何在ECharts中使用线性渐变色,通过echarts.graphic.LinearGradient方法实现。文章不仅提供了完整的代码示例,还解释了各个参数的具体含义及其应用场景。 ... [详细]
  • 本文探讨了在Java多线程环境下,如何确保具有相同key值的线程能够互斥执行并按顺序输出结果。通过优化代码结构和使用线程安全的数据结构,我们解决了线程同步问题,并实现了预期的并发行为。 ... [详细]
  • TCP长连接设备管理平台:架构与功能概览
    本文介绍了基于TCP长连接的设备管理平台的设计理念、技术选型及主要功能模块。最初,项目旨在实现简单的协议测试,但随着需求扩展,逐步演变为一个完整的前后端分离系统。 ... [详细]
  • 深入解析 Vue 的 Transition 组件与第三方动画库的结合使用
    本文详细介绍了 Vue 中的 Transition 组件,探讨其内置类名机制、触发时机及自定义类名的应用。同时,结合 animate.css 和 GSAP 等第三方库,展示了如何实现复杂的动画效果。 ... [详细]
  • 本文介绍如何使用 Android 的 Canvas 和 View 组件创建一个简单的绘图板应用程序,支持触摸绘画和保存图片功能。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 黑马头条项目:Vue 文章详情模块与交互功能实现
    本文详细介绍了如何在黑马头条项目中配置文章详情模块的路由、获取和展示文章详情数据,以及实现关注、点赞、不喜欢和评论功能。通过这些步骤,您可以全面了解如何开发一个完整的前端文章详情页面。 ... [详细]
  • 为了解决不同服务器间共享图片的需求,我们最初考虑建立一个FTP图片服务器。然而,考虑到项目是一个简单的CMS系统,为了简化流程,团队决定探索七牛云存储的解决方案。本文将详细介绍使用七牛云存储的过程和心得。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 本文详细介绍了虚拟专用网(Virtual Private Network, VPN)的概念及其通过公共网络(如互联网)构建临时且安全连接的技术特点。文章探讨了不同类型的隧道协议,包括第二层和第三层隧道协议,并提供了针对IPSec、GRE以及MPLS VPN的具体配置指导。 ... [详细]
  • 本文探讨了在React项目中实现子组件向父组件传递数据的方法,包括通过回调函数和使用React状态管理工具。 ... [详细]
author-avatar
知知亦不知_710
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有