Vue3+ts实现页面跳转及参数传递
## 列表页
<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
// 1 引入useRouter路由信息方法
import { useRouter } from 'vue-router'
// 2 获取实例
const router = useRouter()const gotoDetail = (index: string) => {router.push({path: '/demo2',query: {id: index}})
}</script>
## 详情页
<script lang="ts" setup >
import {ref, reactive, toRefs,onMounted} from 'vue'
// 1 引入useRouter路由信息方法
import { useRoute } from 'vue-router'
// 2 获取实例
const route = useRoute()const { id,name } = route.query// 获取列表const getDetail = async (id: string) => {try {const { data } = await GetDetail(id)console.log(data)msg.value = data} catch (error) {showFailToast("请求失败")}}onMounted( async () => {const { id } = route.queryconsole.log("messageId"+id+",name"+name)const res = await getDetail(id+"")})</script>
useRouter():
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
router.push({path:‘home’});本质是向history栈中添加一个路由,在我们看来是 切换路由,但本质是在添加一个history记录, query: {id: index} 绑定参数。
useRoute()
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等:
query: 对象,包含路由中查询参数的键值对。 例如,对于 /detail?id=1 ,通过route.query可以获取到id的值
onMounted
是一个生命周期钩子函数,用于在组件挂载到 DOM 上之后执行一些操作,onMounted 钩子是通过 setup函数来使用的。<script setup >是一种语法糖写法,比普通的 <script> 语法更有优势。
相关文章:
Vue3+ts实现页面跳转及参数传递
## 列表页 <script lang"ts" setup> import { reactive, toRefs } from vue // 1 引入useRouter路由信息方法 import { useRouter } from vue-router // 2 获取实例 const router useRouter()const gotoDetail (index: string) > {router.push({path: …...
日志框架Log4j、JUL、JCL、Slf4j、Logback、Log4j2
1. JAVA日志框架 1.1 为什么程序需要记录日志 我们不可能实时的24小时对系统进行人工监控,那么如果程序出现异常错误时要如何排查呢?并且系统在运行时做了哪些事情我们又从何得知呢?这个时候日志这个概念就出现了,日志的出现对系…...
mybatis动态SQL-sql片段
1、建库建表 create database mybatis-example; use mybatis-example; create table emp (empNo varchar(40),empName varchar(100),sal int,deptno varchar(10) ); insert into emp values(e001,张三,8000,d001); insert into emp values(e002,李四,9000,d001); insert into…...
wvp-GB28181-pro 2.0+ZLMediaKit 使用Dockerfile制作镜像以及部署【CentOS7】
说明 部署gb28181和zlm主要需要构建两个镜像,第一个为基础镜像,以centos7为基础构建新的基础镜像base.Dockerfile,第二个镜像为服务部署镜像server.Dockerfile,以第一个镜像base.Dockerfile构建出的镜像为基础镜像进行构建 整个基础镜像的构…...
登录校验,JWT令牌技术,过滤器(Filter)拦截器(interceptor)
登录功能: 前端传递json格式的数据。username(用户名)password(密码)。controller层对数据进行接收,由于是接收json格式的数据,所以我们把它封装到一个对象里面,由于登录是员工进行登…...
springCloud项目打包如何把jar放到指定目录下
springCloud项目打包如何把jar发放到指定目录下 maven-antrun-plugin springCloud微服务打包jar,模块过多;我的项目模块结构如下: 我把实体类相关的单独抽离一个模块在service-api下服务单独写在service某块下, 每个模块的jar都…...
vue中2种取值的方式
1.url是这种方式的:http://localhost:3000/user/1 取得参数的方式为:this.$route.params.id 2.url为get方式用?拼接参数的:http://localhost:3000/user?phone131121123&companyId2ahttp://localhost:3000/ 取得参数值的方式…...
Python基础05-函数
零、文章目录 Python基础05-函数 1、函数的作用及其使用步骤 (1)函数的作用 在Python实际开发中,我们使用函数的目的只有一个“让我们的代码可以被重复使用” 函数的作用有两个: ① 代码重用(代码重复使用…...
Ubuntu 设置共享文件夹
一、在Windows中建立一个英文的文件夹 注意:新建文件夹的名称一定要是英文的,不能出现中文的路径(可能出现问题) 二、在VMware中添加共享文件 3: VMware安装VMware Tools 一般安装成功桌面上会显示这个安装包,&…...
操作系统期末复习-内存管理
一、内存管理 分页存储管理,是将一个进程的逻辑地址空间分成若干个大小相等的片,称为页面或页,并为各页加以编号,从0开始,如第0页、第1页等。相应地,也把内存空间分成与页面相同大小的若干个存储块…...
基于YOLOv8深度学习的西红柿成熟度检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战
《博主简介》 小伙伴们好,我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源,可关注公-仲-hao:【阿旭算法与机器学习】,共同学习交流~ 👍感谢小伙伴们点赞、关注! 《------往期经典推…...
大数据存储技术(3)—— HBase分布式数据库
目录 一、HBase简介 (一)概念 (二)特点 (三)HBase架构 二、HBase原理 (一)读流程 (二)写流程 (三)数据 flush 过程 …...
docker容器日志占用磁盘空间过大问题
docker服务运行一段时间后,发现磁盘空间占用很高 其中磁盘占用主要以下目录: /var/lib/docker/containers # 查询占用磁盘较大的文件-升序 du -d1 -h /var/lib/docker/containers | sort -h 控制容器日志大小 法一:容器运行时控制 # max-…...
飞天使-docker知识点6-容器dockerfile各项名词解释
文章目录 docker的小技巧dockerfile容器为什么会出现启动了不暂停查看docker 网桥相关信息 docker 数据卷 docker的小技巧 [rootlight-test playbook-vars[]# docker inspect -f "{{.NetworkSettings.IPAddress}}" d3a9ae03ae5f 172.17.0.4docker d3a9ae03ae5f:/etc…...
oracle-关闭审计功能
1.查看审计功能是否开启 su – oraclesqlplus “/as sysdba”SQL> show parameter audit_trail NAME TYPE VALUE audit_trail string DB 注:VALUE值为DB时,表明审计功能为开启的状态 2.关闭oracle的审计功能 SQL> alter system set audit_trailFALSE scopespfile; Sy…...
three.js(一)
文章目录 three.js环境搭建正文补充 示例效果知识点补充1:一个标准的html知识点补充2:原生的前端框架和Vue框架的区别原生的前端框架Vue框架声明式编程和响应式编程 three.js环境搭建 正文 搭建 Three.js 的环境通常包括以下几个步骤: 1.创建项目目录:…...
Python基础入门:语法与数据类型
Python基础入门:语法与数据类型 一、引言 Python是一种简单易学、功能强大的编程语言,广泛应用于数据分析、机器学习、Web开发等领域。本文将介绍Python的基础语法和数据类型,帮助初学者快速入门。 二、Python基础语法 缩进 Python中的缩…...
@Scheduled任务调度/定时任务-非分布式
1、功能概述 任务调度就是在规定的时间内执行的任务或者按照固定的频率执行的任务。是非常常见的功能之一。常见的有JDK原生的Timer, ScheduledThreadPoolExecutor以及springboot提供的Schduled。分布式调度框架如QuartZ、Elasticjob、XXL-JOB、SchedulerX、PowerJob等。 本文…...
【ARM Trace32(劳特巴赫) 使用介绍 14 -- Go.direct 介绍】
请阅读【Trace32 ARM 专栏导读】 文章目录 Trace32 Go.directGo配合程序断点使用Go 配合读写断点使用Go 快速回到上一层函数 System.Mode Go Trace32 Go.direct TRACE32调试过程中,会经常对芯片/内核进行控制,比如全速运行、暂停、单步等等。这篇文章先…...
第二十章 : Spring Boot 集成RabbitMQ(四)
第二十章 : Spring Boot 集成RabbitMQ(四) 前言 本章知识点:死信队列的定义、场景、作用以及原理、TTL方法的使用以及演示代码示例。 Springboot 版本 2.3.2.RELEASE ,RabbitMQ 3.9.11,Erlang 24.2死信队列 定义:什么是死信队列? 在RabbitMQ中,并没有提供真正意义…...
观察Taotoken在高峰时段的模型路由与容灾表现
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 观察Taotoken在高峰时段的模型路由与容灾表现 在构建依赖大模型能力的应用时,服务的稳定性是开发者关心的核心问题之一…...
基于Simulink图形化建模求解一阶时变偏微分方程
1. 项目概述:从工程视角看一阶时变偏微分方程在工程系统建模与仿真领域,我们常常会遇到一类描述物理量在空间和时间上同时演化的数学模型,这就是偏微分方程。其中,一阶时变偏微分方程,比如对流方程、传输方程ÿ…...
ARM GICv3虚拟中断控制器架构与ICH_LR寄存器解析
1. ARM GICv3虚拟中断控制器架构概述在ARMv8-A架构的虚拟化环境中,中断控制器的虚拟化是实现高效虚拟机隔离和实时响应的关键技术。GICv3作为第三代通用中断控制器,通过引入虚拟化扩展(Virtualization Extensions)为每个虚拟CPU(vCPU)提供了完整的虚拟中…...
opencode无网环境-引用上下文失效问题
问题 由于公司在内网环境开发,没有网络,安装了 opencode 后发现用 无法自动索引出项目文件,导致每次要指定项目文件的时候都得复制全路径。 环境 opencode1.3.6 原因 opencode 是用 ripgrep 扫描和索引文件系统的,启动 open…...
2026年OpenAI接口中转站真实测评:哪款平台能为开发者带来极致体验?
跨国网络延迟、复杂的支付方式以及分散的接口协议,让开发者调用OpenAI API的体验变得支离破碎。而一个智能中转平台,能让这一切变得像调用本地服务一样简单。通过API中转平台,可以一站式解决国内外主流OpenAI模型在价格、网络连通性以及支付方…...
MedComm(IF=10.7)中大孙逸仙纪念医院姚和瑞等团队:多模态数据融合AI模型揭示乳腺癌肿瘤微环境免疫分型异质性与增强的风险分层
01文献学习今天分享的文献是由中大孙逸仙纪念医院姚和瑞等团队于2024年12月在《MedComm》(中科院1区top,IF10.7)上发表的研究“Multimodal data fusion AI model uncovers tumor microenvironment immunotyping heterogeneity and enhanced r…...
懂管理不如会管理,8个维度修炼带队能力
真正优秀的管理者,始终围绕人、事、责、效四个核心,把些事做透,就能带稳队伍、管好全局,让管理事半功倍。 一、目标清晰可落地,杜绝模糊空泛 管理的第一步,是给团队明确、可执行的方向,彻底告别…...
基于Roslyn为AI智能体生成C#代码地图:原理、实现与优化
1. 项目概述:为AI智能体绘制C#代码地图在AI智能体(Agent)技术日益成熟的今天,如何让这些“数字大脑”高效、准确地理解和操作复杂的代码库,成为了一个极具挑战性的工程问题。想象一下,你有一个精通C#的AI助…...
从ESC社交胸牌看无线Mesh网络在物联网与开源硬件中的实践
1. 项目概述:一枚会“社交”的会议胸牌如果你参加过一些技术峰会,对那种别在胸前的纸质或塑料名牌肯定不陌生。它们的功能通常只有一个:告诉别人你是谁。但在2016年的波士顿嵌入式系统大会(ESC)上,主办方玩…...
[笔记] 系统分析师 第四章 数据通信与计算机网络
文章目录前言4.1 数据通信基础知识4.1.1 信道特征信道传输方式信道传输效率时延传输质量4.1.2 数据传输技术1.并行传输和串行传输2.异步传输和同步传输3.数据传输的形式4.1.3 数据编码与调制奇偶校验检错码海明码循环冗余校验码(CRC)1.模拟信道传送模拟数…...
