当前位置: 首页 > news >正文

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小时对系统进行人工监控&#xff0c;那么如果程序出现异常错误时要如何排查呢&#xff1f;并且系统在运行时做了哪些事情我们又从何得知呢&#xff1f;这个时候日志这个概念就出现了&#xff0c;日志的出现对系…...

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主要需要构建两个镜像&#xff0c;第一个为基础镜像&#xff0c;以centos7为基础构建新的基础镜像base.Dockerfile,第二个镜像为服务部署镜像server.Dockerfile&#xff0c;以第一个镜像base.Dockerfile构建出的镜像为基础镜像进行构建 整个基础镜像的构…...

登录校验,JWT令牌技术,过滤器(Filter)拦截器(interceptor)

登录功能&#xff1a; 前端传递json格式的数据。username&#xff08;用户名&#xff09;password&#xff08;密码&#xff09;。controller层对数据进行接收&#xff0c;由于是接收json格式的数据&#xff0c;所以我们把它封装到一个对象里面&#xff0c;由于登录是员工进行登…...

springCloud项目打包如何把jar放到指定目录下

springCloud项目打包如何把jar发放到指定目录下 maven-antrun-plugin springCloud微服务打包jar&#xff0c;模块过多&#xff1b;我的项目模块结构如下&#xff1a; 我把实体类相关的单独抽离一个模块在service-api下服务单独写在service某块下&#xff0c; 每个模块的jar都…...

vue中2种取值的方式

1.url是这种方式的&#xff1a;http://localhost:3000/user/1 取得参数的方式为&#xff1a;this.$route.params.id 2.url为get方式用&#xff1f;拼接参数的&#xff1a;http://localhost:3000/user?phone131121123&companyId2ahttp://localhost:3000/ 取得参数值的方式…...

Python基础05-函数

零、文章目录 Python基础05-函数 1、函数的作用及其使用步骤 &#xff08;1&#xff09;函数的作用 在Python实际开发中&#xff0c;我们使用函数的目的只有一个“让我们的代码可以被重复使用” 函数的作用有两个&#xff1a; ① 代码重用&#xff08;代码重复使用&#xf…...

Ubuntu 设置共享文件夹

一、在Windows中建立一个英文的文件夹 注意&#xff1a;新建文件夹的名称一定要是英文的&#xff0c;不能出现中文的路径&#xff08;可能出现问题&#xff09; 二、在VMware中添加共享文件 3: VMware安装VMware Tools 一般安装成功桌面上会显示这个安装包&#xff0c;&…...

操作系统期末复习-内存管理

一、内存管理 分页存储管理&#xff0c;是将一个进程的逻辑地址空间分成若干个大小相等的片&#xff0c;称为页面或页&#xff0c;并为各页加以编号&#xff0c;从0开始&#xff0c;如第0页、第1页等。相应地&#xff0c;也把内存空间分成与页面相同大小的若干个存储块&#xf…...

基于YOLOv8深度学习的西红柿成熟度检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测、深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

大数据存储技术(3)—— HBase分布式数据库

目录 一、HBase简介 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;特点 &#xff08;三&#xff09;HBase架构 二、HBase原理 &#xff08;一&#xff09;读流程 &#xff08;二&#xff09;写流程 &#xff08;三&#xff09;数据 flush 过程 &#xf…...

docker容器日志占用磁盘空间过大问题

docker服务运行一段时间后&#xff0c;发现磁盘空间占用很高 其中磁盘占用主要以下目录&#xff1a; /var/lib/docker/containers # 查询占用磁盘较大的文件-升序 du -d1 -h /var/lib/docker/containers | sort -h 控制容器日志大小 法一&#xff1a;容器运行时控制 # 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 的环境通常包括以下几个步骤&#xff1a; 1.创建项目目录&#xff1a…...

Python基础入门:语法与数据类型

Python基础入门&#xff1a;语法与数据类型 一、引言 Python是一种简单易学、功能强大的编程语言&#xff0c;广泛应用于数据分析、机器学习、Web开发等领域。本文将介绍Python的基础语法和数据类型&#xff0c;帮助初学者快速入门。 二、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调试过程中&#xff0c;会经常对芯片/内核进行控制&#xff0c;比如全速运行、暂停、单步等等。这篇文章先…...

第二十章 : Spring Boot 集成RabbitMQ(四)

第二十章 : Spring Boot 集成RabbitMQ(四) 前言 本章知识点:死信队列的定义、场景、作用以及原理、TTL方法的使用以及演示代码示例。 Springboot 版本 2.3.2.RELEASE ,RabbitMQ 3.9.11,Erlang 24.2死信队列 定义:什么是死信队列? 在RabbitMQ中,并没有提供真正意义…...

国央企备考求职精灵和粉笔APP哪个靠谱

每年国央企和事业单位招聘季&#xff0c;数百万求职者竞争激烈。面对庞大的招录名额、繁琐的笔试流程&#xff0c;选择合适的备考工具至关重要。市场上&#xff0c;粉笔是公考领域的老牌选手&#xff0c;而求职精灵 Genielink 作为 AI 原生工具也在改变着求职赛道格局。下面就对…...

供水泵恒压变频控制系统:备用泵自动投切,保障供水不间断

供水泵恒压变频控制系统是一套融合变频调速、PID闭环控制与智能多泵管理的自动化节能供水解决方案&#xff0c;核心是按需供水、稳压节能、无人值守。 一、核心原理压力采集&#xff1a;管网压力传感器实时采集水压(0~1.6MPa)。偏差计算&#xff1a;PLC/专用控制器将实测值与设…...

SOLID不是教条!DeepSeek检查报告揭示:83%的“违规”实为合理权衡——附5个高可信度豁免决策框架

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;SOLID不是教条&#xff01;DeepSeek检查报告揭示&#xff1a;83%的“违规”实为合理权衡——附5个高可信度豁免决策框架 SOLID原则常被误读为不可逾越的代码铁律&#xff0c;但DeepSeek-R1在对127个中大…...

AI智能体集中管控平台:基于TUI的Cursor多智能体协同管理方案

1. 项目概述&#xff1a;一个为开发者设计的AI智能体集中管控平台如果你和我一样&#xff0c;在日常开发中重度依赖Cursor这样的AI编程助手&#xff0c;那你肯定遇到过这个痛点&#xff1a;当项目复杂起来&#xff0c;需要同时运行多个不同职责的AI智能体&#xff08;Agent&…...

GD32F103实战指南:EXTI外部中断配置与按键响应优化

1. EXTI外部中断基础概念与GD32F103特性 外部中断&#xff08;EXTI&#xff09;是嵌入式系统中实现实时响应的关键机制。GD32F103作为Cortex-M3内核的国产MCU代表&#xff0c;其EXTI控制器具有20个独立的中断/事件线&#xff0c;支持三种触发方式&#xff1a;上升沿、下降沿以及…...

ELAU 艾乐 BCH16HD02330A5C 伺服电机:小型自动化设备的精准动力解决方案

一、产品概述ELAU 艾乐作为施耐德电气旗下专注于运动控制领域的高端品牌&#xff0c;凭借其在工业自动化领域数十年的技术积累&#xff0c;推出了 BCH 系列高性能伺服电机。其中&#xff0c;BCH16HD02330A5C作为该系列中针对小型设备优化的型号&#xff0c;以 "小体积、高…...

观察ubuntu服务器通过taotoken调用api的延迟与稳定性表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察 Ubuntu 服务器通过 Taotoken 调用 API 的延迟与稳定性表现 在将大模型能力集成到生产环境时&#xff0c;API 调用的延迟与稳定…...

收藏!小白程序员必看:AI应用黄金三年,普通人如何入局高薪岗位?

文章分析了AI应用与智能体时代的就业趋势&#xff0c;指出AI正在重塑岗位能力结构并创造新职业。未来三年&#xff0c;AI应用工程师、AI自动化运营、AI产品经理等岗位需求大、门槛低&#xff0c;适合普通人入局。文章建议从建立AI知识体系、掌握关键技能、完成AI项目入手&#…...

Claude Code 在 JetBrains IDE 的用户指南

Claude Code 是由 Anthropic 推出的智能编码工具&#xff0c;作为全球最强大的编程助手之一&#xff0c;Claude Code 提供了专门的 JetBrains IDE 插件&#xff0c;支持包括 IntelliJ IDEA、PyCharm、WebStorm、GoLand、PhpStorm 和 Android Studio 在内的整个 JetBrains IDE 系…...

让音乐看得见:Lano Visualizer桌面音频可视化工具深度解析

让音乐看得见&#xff1a;Lano Visualizer桌面音频可视化工具深度解析 【免费下载链接】Lano-Visualizer A simple but highly configurable visualizer with rounded bars. 项目地址: https://gitcode.com/gh_mirrors/la/Lano-Visualizer 还在为单调的桌面音乐播放体验…...