vue3页面传参

一,用query传参

方法: router.push({path: ‘路由地址’, query: ‘参数’})

例子:a页面携带参数跳转到b页面并且b页面拿到a页面传递过来的参数

在路由router.ts配置
在这里插入图片描述

a页面:

<template><div >a页面</div><button @click="btnHandle">跳转到b页面</button>
</template><script setup lang='ts'>import { useRouter } from 'vue-router';const router = useRouter();const btnHandle = () => {router.push({path: '/b', query: {name: 'coderkey', age: 18}})}
</script>

b页面:

<template><div >b页面</div>
</template><script setup lang='ts'>import { useRoute } from 'vue-router';const route = useRoute();console.log('route',route.query); //{name: 'coderkey', age: 18}
</script>

一,用params传参

方法: router.push({name: ‘路由名’, params: ‘参数’})

在路由router.ts配置
在这里插入图片描述

a页面:

<template><div >a页面</div><button @click="btnHandle">跳转到b页面</button>
</template><script setup lang='ts'>import { useRouter } from 'vue-router';const router = useRouter();const btnHandle = () => {router.push({name: 'b', params: {name: 'coderkey', age: 18}})}
</script>

b页面:

<template><div >b页面</div>
</template><script setup lang='ts'>import { useRoute } from 'vue-router';const route = useRoute();console.log('route',route.params); //{name: 'coderkey', age: 18}
</script>

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

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

相关文章

【可控图像生成系列论文(二)】MimicBrush 港大、阿里、蚂蚁集团合作论文解读2

【可控图像生成系列论文&#xff08;一&#xff09;】简要介绍了论文的整体流程和方法&#xff0c;本文则将就整体方法、模型结构、训练数据和纹理迁移进行详细介绍。 1.整体方法 MimicBrush 的整体框架如下图所示。为了实现模仿编辑&#xff0c;作者设计了一种具有双扩散模型…

SpingBoot快速入门下

响应HttpServietResponse 介绍 将ResponseBody 加到Controller方法/类上 作用&#xff1a;将方法返回值直接响应&#xff0c;如果返回值是 实体对象/集合&#xff0c;将会自动转JSON格式响应 RestController Controller ResponseBody; 一般响应 统一响应 在实际开发中一般…

DS1339C串行实时时钟-国产兼容RS4C1339

RS4C1339串行实时时钟是一种低功耗的时钟/日期设备&#xff0c;具有两个可编程的一天时间报警器和一个可编程方波输出。地址和数据通过2线双向总线串行传输。时钟/日期提供秒、分钟、小时、天、日期、月份和年份信息。对于少于31天的月份&#xff0c;月末的日期会自动调整&…

PDO预编译与sql注入

刚学web安全的时候学到sql注入防御&#xff0c;那些文章基本上都会说利用pdo预编译就可以近乎完美防御sql注入&#xff0c;或者看到一些渗透经验贴&#xff0c;遇到sql经过预编译的网站师傅们总是会建议赶紧换个站&#xff0c;那么预编译究竟能不能完美防御sql注入&#xff0c;…

VBA基础知识点总结

VBA教程 VBScript教程 数据类型 数字数据类型 非数字数据类型 变量&常量 可以通过Dim、Public或Private语句声明变量。 变量语法&#xff1a;Dim <<variable_name>> As <<variable_type>>&#xff08;需要在使用它们之前声明&#xff09; 常量语…

LVS+Keepalived高可用集群部署

一、高可用群集(HA)的作用 企业应用中&#xff0c;单台服务器承担应用存在单点故障的危险&#xff0c;单点故障一旦发生&#xff0c;企业服务将发生中断&#xff0c;造成极大的危害。 高可用集群是由一台主调度器和一台或多台备用调度器。在主调度器能够正常运转时&#xff0c;…

优选算法刷题笔记 2024.6.10-24.6.20

一、双指针算法(快慢指针,对撞指针) 艹&#xff0c;CSDN吞了我是十三题笔记&#xff01;&#xff01;&#xff01; 二、滑动窗口(滑动窗口) 1、找到字符串中所有字母异位词 class Solution {public List<Integer> findAnagrams(String s, String p) {int[] hash1 new in…

【Python】一文向您详细解析内置装饰器 @lru_cache

【Python】一文向您详细解析内置装饰器 lru_cache 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&a…

TMS320F280049学习5:CPU timer中断

TMS320F280049学习5&#xff1a;CPU timer中断 文章目录 TMS320F280049学习5&#xff1a;CPU timer中断前言一、工程代码二、CPU timer时钟总结 前言 DSP的内部有3个CPU timer&#xff0c;分别是CUP timer0 / 1 / 2&#xff0c;传说CPU timer2一般在跑系统时用&#xff0c;类似…

网络基础

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 当今的时代是一个网络的时代&#xff0c;网络无处不在。而我们前面学习编写的程序都是单机的&#xff0c;即不能和其他电脑上的程序进行通信。为了实…

新火种AI|英伟达市值超越微软!AI技术如何重塑科技股价值?

作者&#xff1a;一号 编辑&#xff1a;美美 AI&#xff0c;正带着美股狂奔。 2024年&#xff0c;英伟达&#xff08;NVIDIA&#xff09;以其在人工智能&#xff08;AI&#xff09;领域的卓越表现&#xff0c;市值首次超越了科技巨头微软&#xff0c;成为全球市值最高的公司…

车载测试面试项目看这一套就够了!车载测试___自我讲解项目

面试官您好&#xff0c;我叫xx来自安微&#xff0c;今年xx岁&#xff0c;毕业于安微新华学院&#xff0c;我是从2017年开始接触软件测试行业&#xff0c;目前从事软件测试工作有5年多时间&#xff0c;第一家公司做了电商和进销存项目app和web都有做过&#xff0c;上家公司做了车…

C语言变量、指针的内存关系

1. type p ? 表示从内存地址p开始&#xff0c;开辟一段内存&#xff0c;内存大小为类型type规定的字节数&#xff0c;然后把等号右边的值写入到这段内存中。 因此&#xff0c;这块内存起点位置是p&#xff0c;结束是ptype字节数-1。 2. type* p ?表示从内存地址p开始&…

Unity3d 游戏暂停(timeScale=0)引起的deltaTime关联的系列问题解决

问题描述 游戏暂停的功能是通过设置timeScale0实现的&#xff0c;不过在暂停游戏的时候&#xff0c;需要对角色进行预览和设置&#xff0c;为了实现这个功能&#xff0c;是通过鼠标控制相机的操作&#xff0c;为了使相机的操作丝滑&#xff0c;获取鼠标操作系数乘以Time.delta…

Opencv学习项目3——pytesseract

上一次我们使用pytesseract.image_to_data(img)来检测文本&#xff0c;这次我们来只检测数字 项目演示 可以看到&#xff0c;我们只检测了数字其他的并没有检测出来 代码实现 前面两次介绍了opencv的画矩形和设置文本&#xff0c;这次就直接用了&#xff0c;不太明白的可以看…

数据资产与用户体验优化:深入挖掘用户数据,精准分析用户需求与行为,优化产品与服务,提升用户体验与满意度,打造卓越的用户体验,赢得市场认可

一、引言 在数字化时代&#xff0c;数据已经成为企业最宝贵的资产之一。通过深入挖掘和分析用户数据&#xff0c;企业能够精准把握用户需求和行为&#xff0c;从而优化产品与服务&#xff0c;提升用户体验和满意度。这不仅有助于企业在激烈的市场竞争中脱颖而出&#xff0c;还…

Java基础 - 练习(四)打印九九乘法表

Java基础练习 打印九九乘法表&#xff0c;先上代码&#xff1a; public static void multiplicationTable() {for (int i 1; i < 9; i) {for (int j 1; j < i; j) {// \t 跳到下一个TAB位置System.out.print(j "" i "" i * j "\t"…

戏剧之家杂志戏剧之家杂志社戏剧之家编辑部2024年第14期目录

文艺评论 南戏瓯剧跨文化传播研究 陈晓东;高阳;许赛梦; 3-7 论互联网时代的戏剧传播与批评——以西法大剧社和南山剧社为例 邬慧敏; 8-10 “左手荒诞&#xff0c;右手温情”——《西西弗神话》在戏剧《第七天》中的接受探究 赵稳稳; 11-13 戏剧研讨《戏剧之家》投稿…

[SAP ABAP] 数据类型

1.基本数据类型 示例1 默认定义的基本数据类型是CHAR数据类型 输出结果: 示例2 STRING数据类型用于存储任何长度可变的字符串 输出结果: 示例3 DATE数据类型用于存储日期信息&#xff0c;并且可以存储8位数字 输出结果: 提示Tips&#xff1a;日期和时间类型的变量可以直接进…

openh264 帧级码率控制源码分析

openh264 码率控制结构 关于 openh264 码率控制整体结构&#xff0c;可以参考&#xff1a;openh264 码率控制原理框架。 openh264 帧级码率控制介绍 函数关系图&#xff1a;从图可以看出&#xff0c;帧级码控的核心函数就是WelsRcPictureInitGom、WelsRcPictureInfoUpdateGo…