vue3 常见的路由传参无刷新修改当前路由url带参

news2024/9/22 21:23:11

无刷新修改当前路由url带参

//tabs切换部分
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane  v-for="(item,index) in tagList"  :label="item.title"  :name="item.name" :key="index"></el-tab-pane>
 </el-tabs>
 <script setup>
 import {ref} from 'vue'
 import {userRouter} from 'vue-router'
const router =userRouter()
// tag的数组
let tagList = ref([
    {name:'0',title:"基本信息"},
    {name:'1',title:"医疗记录"},
    {name:'2',title:"院外监测"},
    {name:'3',title:"管理方案"},
    {name:'4',title:"咨询记录"},
    {name:'5',title:"专病档案"}
])
// 标签的id
let activeName = ref(route.query.seeState)
// tab标签切换
const handleClick=(e)=>{
    activeName.value=e.props.name
    //路由跳转
    router.push({
        path: '/subhealth/subhealth',
        query: {
          userId: route.query.userId,
          seeState:e.props.name
        }
      })
}
 </script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a666653226b740efbb3b1ba663fe6967.png

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1404430.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于springboot酒店预订系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 前端技术&#xff1a;AdminLTEjQueryvue.jselementuijsp 服务端技术&#xff1a;springbootmybatis 本系统功能包括&#xff1a; 一、…

展锐T618_虎贲T618紫光展锐安卓核心板规格参数

基于紫光展锐八核T618平台的纯国产化方案&#xff0c;采用了开放的智能Android操作系统&#xff0c;并集成了4G网络、2.5G5G双频WIFI(可支持1*1 MIMO)、BLUETOOTH近距离无线传输技术以及GNSS无线定位技术。用户可以根据特定场合的需求&#xff0c;选择合适的嵌入式ARM核心模块&…

司铭宇老师:二手房营销培训课程:二手房销售技巧和话术

二手房营销培训课程&#xff1a;二手房销售技巧和话术 在房地产市场中&#xff0c;二手房销售一直是一个挑战性极强的领域。由于面对的客户群体多样&#xff0c;房源条件各异&#xff0c;销售人员必须具备高超的销售技巧和精湛的话术能力。本文将通过实战案例分析&#xff0c;深…

手握中下牌型如何赢掼蛋?

中下牌型的特点&#xff1a;牌不是很好&#xff0c;炸弹少&#xff0c;但是牌型种类较多&#xff0c;并且有上手牌&#xff0c;适合配合对方&#xff0c;发动进攻。手握此类牌型&#xff0c;可采取协同进攻、全面防御、顺势突围三种方式来扭转双下局面。 一、协同进攻 此时应当…

Spark UI中 Shuffle Exchange 和 BroadcastExchange 中的 dataSize 值为什么不一样

背景 Spark 3.5 最近在看Spark UI 上的一些指标看到一个很有意思的东西, 相邻的Shuffle Exechange 和 BroadcastExechange 中的 datasize 居然不一样&#xff0c; 前者为 765KB, 后者为 64.5MB。差别还不少&#xff0c;中间就增加了一个 AQEShuffleRead 计划 结论 Shuffle E…

2023年春秋杯网络安全联赛冬季赛 Writeup

文章目录 Webezezez_phppicup Misc谁偷吃了外卖modules明文混淆 Pwnnmanagerbook Reupx2023 CryptoCF is Crypto Faker 挑战题勒索流量Ezdede 可信计算 Web ezezez_php 反序列化打redis主从复制RCE&#xff1a;https://www.cnblogs.com/xiaozi/p/13089906.html <?php c…

C++入门学习(十一)字符型

C中的字符型可以表示ASCII码中的所有字符&#xff0c;包括字母、数字、标点符号等。 ASCII码是一种用于编码字符的编码系统&#xff0c;它使用不同的数值来表示不同的字符。ASCII码使用7位或8位二进制数来表示每个字符&#xff0c;因此可以表示128或256个不同的字符。 在ASCI…

ubuntu使用docker compose一键部署项目

1、将前面手动部署的容器和镜像全部删除 docker rmi hmall (hmall镜像名) docker rmi image_id rmi 是删除多个 rm是删除一个 2、执行命令 docker compose up -d http://192.168.79.129:18080/search.html 访问安装成功&#xff01; 该ip是虚拟机ubuntu的ip 3、docker-compos…

【AI的未来 - AI Agent系列】【MetaGPT】6. 用ActionNode重写技术文档助手

文章目录 0. 前置推荐阅读1. 重写WriteDirectory Action1.1 实现WriteDirectory的ActionNode&#xff1a;DIRECTORY_WRITE1.2 将 DIRECTORY_WRITE 包进 WriteDirectory中 2. 重写WriteContent Action2.1 思考重写方案2.2 实现WriteContent的ActionNode2.3 改写WriteContent Act…

【Kafka】开发实战和Springboot集成kafka

目录 消息的发送与接收生产者消费者 SpringBoot 集成kafka服务端参数配置 消息的发送与接收 生产者 生产者主要的对象有&#xff1a; KafkaProducer &#xff0c; ProducerRecord 。 其中 KafkaProducer 是用于发送消息的类&#xff0c; ProducerRecord 类用于封装Kafka的消息…

机器学习_正则化、欠拟合和过拟合

文章目录 正则化欠拟合和过拟合正则化参数 正则化 机器学习中的正则化是在损失函数里面加惩罚项&#xff0c;增加建模的模糊性&#xff0c;从而把捕捉到的趋势从局部细微趋势&#xff0c;调整到整体大概趋势。虽然一定程度上地放宽了建模要求&#xff0c;但是能有效防止过拟合…

【GitHub项目推荐--一个语音机器人项目】【转载】

推荐一个腾讯大佬开源的语音对话机器人&#xff1a;wukong-robot &#xff0c;悟空机器人在 GitHub 上斩获 3.2K 的 Star。 这是一个简单灵活的中文语音对话机器人项目&#xff0c;目的是让中国的开发者也能快速打造个性化的智能音箱&#xff0c;同时&#xff0c;该项目还是第…

科技云报道:金融大模型落地,还需跨越几重山?

科技云报道原创。 时至今日&#xff0c;大模型的狂欢盛宴仍在持续&#xff0c;而金融行业得益于数据密集且有强劲的数字化基础&#xff0c;从一众场景中脱颖而出。 越来越多的公司开始布局金融行业大模型&#xff0c;无论是乐信、奇富科技、度小满、蚂蚁这样的金融科技公司&a…

【XR806开发板试用】系列之一 - Linux环境下Ubuntu完全开发流程

前言 为了让极术社区开发者体验搭载安谋科技STAR-MC1处理器的面向IoT领域的全志XR806开发板&#xff0c;极术社区联合全志在线开发者社区共同推出XR806开发板免费试用活动。 极术社区特准备了200块XR806开发板作为2022年社区新年活动&#xff0c;申请的人数有600多&#xff0c…

���恒峰|配网行波型故障预警定位装置:电力系统的守护神

&#xfffd;&#xfffd;&#xfffd;在电力系统中&#xff0c;设备的正常运行对于保障供电至关重要。而配网行波型故障预警定位装置就是电力系统的守护神&#xff0c;它能够实时监测设备状态&#xff0c;提前发现故障&#xff0c;确保电力供应的稳定。本文将详细介绍配网行波…

【前端可视化】postcss-px-to-viewport 适配怎么限制最大宽度?使用 postcss-mobile-forever

需求原因 自己用 nuxt3 写官网发现用 postcss-px-to-viewport 这个插件虽然能够实现基于 vw 的响应式&#xff0c;但是无法做到限制宽度&#xff0c;比如设计稿 1920p&#xff0c;我只想让最大缩放比例为 1920p&#xff0c;不能超过&#xff0c;就无法实现了。 方案参考 纯 c…

记一次低级且重大的Presto运维事故

本文纯属虚构&#xff0c;旨在提醒各位别犯类似低级错误。 如有雷同&#xff0c;说的就是你&#xff01; 文章目录 前言事件回顾后续总结 前言 首先&#xff0c;要重视运维工作和离职人员的交接工作&#xff0c;这个不必多说。一将无能&#xff0c;累死三军&#xff01; 接下来…

Xilinx MicroBlaze 告警提示解决方案

告警&#xff1a; [BD 41-2559] AXI interface port /M02_AXI_0 is not associated to any clock port. It may not work correctly. Please update ASSOCIATED_BUSIF parameter of a clock port to include this interface port in an external clock port. If no external cl…

Java 设计者模式以及与Spring关系(五) 策略和观察者模式

目录 简介: 23设计者模式以及重点模式 策略模式&#xff08;Strategy Pattern&#xff09; 示例 spring中应用 观察者模式&#xff08;Observer&#xff09; 示例 spring中应用 简介: 本文是个系列一次会出两个设计者模式作用&#xff0c;如果有关联就三个&#xff0c;…

一键去除图片背景——background-removal-js

一些JavaScript库和工具可以帮助实现背景去除&#xff1a; OpenCV.js&#xff1a;OpenCV的JavaScript版本&#xff0c;提供了许多计算机视觉功能&#xff0c;包括背景去除。Jimp&#xff1a;一个用于处理图像的JavaScript库&#xff0c;提供了许多图像处理功能&#xff0c;包括…