Vue3点击按钮实现跳转页面并携带参数

前提:有完整的路由规则

1.源页面

<template><div><h1>源页面</h1><!--通过js代码跳转--><template #default="scope"><button @click="toTargetView(scope.row)">点击跳转携带参数</button></template></div>
</template><script setup>
//引入路由组件
import router from '@/router/index.js'
import {ref} from 'vue'//可以定义参数
const testParam= ref('Test')const toTargetView = () => {router.push({path: 'prmbillingcancel',query: {testParam: testParam.value,row: JSON.stringify(row),//这里要JSON序列化一下}})
}</script><style scoped></style>

目标页面这里 path里面写自己的路由编码,传了当前行数据和自定义参数,当前行参数要序列化

2.目标页面

<template><div><h1>目标页面</h1>用户名:{{ username }}</div>
</template><script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'const route = useRoute()
//接收自定义参数
const username = ref('')
//接收当前行数据
const item = ref<any>(null);//使用钩子函数接收来自路由的参数
onMounted(() => {username.value = route.query.usernameitem.value = JSON.parse(route.query.row as string);//这里反序列化获取参数console.log("row",item.value);})
</script><style scoped></style>

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

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

相关文章

动态超参数优化:在Mojo模型中实现自定义搜索的艺术

动态超参数优化&#xff1a;在Mojo模型中实现自定义搜索的艺术 在机器学习领域&#xff0c;超参数的调整是提高模型性能的关键步骤。Mojo模型&#xff0c;作为机器学习模型的泛称&#xff0c;通常需要通过调整超参数来达到最优状态。然而&#xff0c;传统的超参数搜索方法往往…

3.3-LSTM的改进

文章目录 1改进点1.1多层化1.2 dropout1.2.1具体概念1.2.2应该插入到LSTM模型的哪里 1.3权重共享 2改进之后的LSTMLM的代码实现2.1初始化2.2前向计算2.3反向传播 3相应的学习代码的实现4总结 1改进点 1.1多层化 加深神经网络的层数往往能够学习更复杂的模式&#xff1b;因此这…

NOI大纲——普及组——素数筛法

素数筛的进化史 1.最为基础的筛法——试除法 时间复杂度 O ( n 2 ) O(n^2) O(n2) int a[10000],tot0,n; for (int i2;i<n;i){bool flagfalse;for (int j2;j<i;j){if (i%j0)flagtrue;}if (flagfalse){a[tot]i;tot;} } for (int i0;i<tot;i){cout<<a[i]<&l…

【0-1 架构问题集合】

常见问题 大数据量高并发情况下如何更新缓存二级目录三级目录 大数据量高并发情况下如何更新缓存 首先是查询的时候&#xff0c;一般先查询缓存&#xff0c;在查询数据库&#xff0c;同步的去更新缓存但是都是异步去更新&#xff0c;引入消息队列MQ 本质是个队列&#xff0c;F…

JVM之经典垃圾收集器

目录 Serial收集 ParNew收集器 Parallel Scavenge收集器 Serial Old收集器 Parallel Old收集器 CMS垃圾收集器&#xff08;重点&#xff09;&#xff1a; Garbage First 收集器&#xff08;重点&#xff09;&#xff1a; Serial收集 使用一个处理器或一条收集线程去完成垃…

利用换元法计算积分的常见题型(考研高数复习)

考研中常见的几种换元法积分计算题 (1)被积式仅包含一个根式&#xff1a;根号下为有 a a a 和 x x x 的平方和/平方差 此种类型的积分题型&#xff0c;可以通过构造单个锐角大小为 t t t 的直角三角形&#xff0c;利用勾股定理和三角函数进行代换。 平方和的情况 形如 ∫…

Java高级工程师应该怎样准备笔试?

哈哈&#xff0c;大早上&#xff0c;有个粉丝问&#xff1a;Java高级工程师应该怎样准备笔试&#xff1f; 这问题还真是小意思啊。Java高级工程师的笔试怎么准备&#xff1f;你问得好&#xff01;咱们混迹江湖这么久&#xff0c;什么风浪没见过&#xff0c;面试笔试这些东西&a…

Java:swagger/knife4j接口返回的json数据中文显示乱码问号???

目录 问题描述问题解决参考文章 问题描述 正常接口的中文返回是正确的 而只要发生异常处理&#xff0c;就会使用全局统一异常处理&#xff0c;输出包含中文字符的json字符串&#xff0c;发现&#xff0c;全都变成了问号?????? /*** 统一异常处理*/ ControllerAdvice Sl…

java学习----注释

简介 override介绍&#xff1a; 添加了这个注释其实是做了个语法校验的作用 override定义 Deprecated介绍&#xff1a; 源码&#xff1a; SuppressWarnings介绍&#xff1a; 源码&#xff1a; 元注解 Retention注解介绍&#xff1a; 案列 Target注解介绍&#xff1a; Documente…

LLM - 理解 Transformer 的位置编码 sin cos 的作用与原理

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/140697827 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 Transformer 模型中的位置编码是关键技术,通过为每个词嵌入向量添加位…

数据库第五次作业

1. 触发器 建立触发器&#xff0c;订单表中增加订单数量后&#xff0c;商品表商品数量同步减少对应的商品订单出数量,并测试 建立触发器&#xff0c;实现功能:客户取消订单&#xff0c;恢复商品表对应商品的数量 建立触发器&#xff0c;实现功能:客户修改订单&#xff0c;商品…

【微软蓝屏】微软Windows蓝屏问题汇总与应对解决策略

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

分布式:保证分布式事务的一致性

文章目录 保证分布式事务的一致性XA协议两阶段提交TCC模式SAGA模式 本篇开始进行分布式的学习&#xff0c;由于时间原因&#xff0c;我也没有过多时间深入学习&#xff0c;因此打算在有时间就进行这块内容的学习&#xff0c;学习的切入点也是从一些问题开始进行切入学习吧 保证…

2024年铜川宜君半程马拉松,暴晒+爬坡152安全完赛

1、赛事背景 2024年7月21日&#xff0c;我参加了2024年铜川宜君半程马拉松赛&#xff0c;7月举办的赛事很少&#xff0c;全国都算温度比较高的&#xff0c;虽然宜君是一个山城&#xff0c;还是会担心气温会高。 临开赛1、2周&#xff0c;陕西区域降水比较多&#xff0c;赛前一…

【算法专题】双指针算法之LCR 179. 查找总价格为目标值的两个商品(力扣)

欢迎来到 CILMY23的博客 &#x1f3c6;本篇主题为&#xff1a;双指针算法之LCR 179. 查找总价格为目标值的两个商品&#xff08;力扣&#xff09; &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法…

使用nginx解决本地环境访问线上接口跨域问题

前言 前端项目开发过程中&#xff0c;经常会遇到各种各样的跨域问题。 虽然大部分时候&#xff0c;由脚手架自带的proxy功能即可解决问题&#xff0c;如webpack&#xff0c;vite等&#xff1b;但是若没有通过脚手架搭建项目&#xff0c;或者必须使用某些特殊规则转发时&#…

了解光耦合器从基础到应用

光耦合器也称为光电耦合器&#xff0c;是一种利用光信号传递电信号的电子元器件。它广泛应用于各种电子设备和电路中&#xff0c;因其在隔离电气信号、提高抗干扰能力方面的独特优势&#xff0c;备受工程师们的青睐。本文将为光耦爱好者和高级工程师提供一份有关光耦合器的知识…

解锁人工智能学习中的数学密钥

一、启航&#xff1a;奠定数学基础 1. 线性代数&#xff1a;AI的入门语言 学习目标&#xff1a;掌握向量、矩阵的基本概念及运算&#xff0c;理解线性空间、线性变换及特征值、特征向量的意义。学习建议&#xff1a;从基础教材入手&#xff0c;如《线性代数及其应用》&#x…

企业级视频拍摄与编辑SDK的全面解决方案

视频已成为企业传播信息、展示品牌、连接用户的重要桥梁&#xff0c;如何高效、专业地制作高质量视频内容&#xff0c;成为众多企业面临的共同挑战。美摄科技&#xff0c;作为视音频技术领域的创新先锋&#xff0c;以其强大的视频拍摄与编辑SDK&#xff0c;为企业量身打造了一站…

cmake 常用功能解析

cmake_minimum_required(VERSION 3.1) # 声明要求的 cmake 最低版本# 设置项目名称 和编程语言 project(yolov8 LANGUAGES CXX CUDA)set(CMAKE_CUDA_ARCHITECTURES 60 61 62 70 72 75 86 89 90) # 通过 CMake 设置架构版本号 set(CMAKE_CUDA_COMPILER /usr/local/cuda/bin/n…