路由_传递params参数和query参数

传递params参数

传递params参数可以直接在路径后面加上参数:

上述就是在路径变化的时候传过去三个值分别为哈哈、嘿嘿、呵呵的参数

但是这样的话会被认为三个参数是路径的一部分,计算机没有办法区分哪些是路径哪些是参数,所以首先要在这条路由规则下面占位

当路由器遇到"/news/details/哈哈/嘿嘿/呵呵"这样的路径的时候就去找对应的路由规则,就会知道后面三个是参数,且名字是id、title、contents,在被引用组件中要取得这三个参数就要有对应的名字

其次将参数传递出去,有两种写法

注意当使用对象类型的to写法传递params参数时要用路由的name属性,不能用path属性

最后在被引用的组件中获取参数

传递query参数


在传递路由的同时可以传递query参数和params参数

就是在展示新的组件的同时将本组件的一些参数传过去给新组件填充页面

首先在发生路由变化的组件,如News.vue中改变路径的同时传递参数

然后在路径变化之后引入的新组件Details.vue中接收参数

传递params参数总结:

1.在路由规则中占位,告诉路由器这个路径从哪个地方开始是参数以及参数的名称

2.在导航组件中用RouteLink来实现路由变化以及参数传递

3.在被引用组件中const route = useRoute()来获得路由,参数在route.params.参数名中

传递query参数总结:

1.在导航组件中用RouteLink来实现路由变化以及参数传递

2.在被引用组件中const route = useRoute()来获得路由,参数在route.query.参数名中

异同

1.params参数:只能使用name

 :to="{

                name:'xiangqing',

                params:{

                    id:news.contents,

                    title:news.title,

                    contents:news.contents

                }

                }"

query参数:可以使用name也可以使用path

:to="{

                path:'/news/details',

                query:{

                id:news.id,

                title:news.title,

                contents:news.contents

                }

2.params参数需要在路由规则中占位,query参数是key=value的形式,且多个参数之间用&连接

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

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

相关文章

Qt TreeWidget详细说明

一.定义 Qt的TreeWidget是一个用于展示树状数据的控件,可以显示带有父子关系的数据。TreeWidget可以包括一列或多列数据,并且可以提供用户对数据进行展开和折叠的功能。 TreeWidget中的数据是以树的形式展示的,每个节点可以包含子节点&#x…

React useState数组新增和删除项

在React中,我们可以使用useState钩子来管理组件的状态,其中包括数组。如何在React函数组件中对数组进行增加和删除项的操作? 新增项时:我们可以对原数组进行解构,并把新增项一起加入到新数组; 删除项时&…

LeetCode 264 —— 丑数 II

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 第一个丑数是 1 1 1,由于丑数的质因子只包含 2 、 3 、 5 2、3、5 2、3、5,所以后面的丑数肯定是前面的丑数分别乘以 2 、 3 、 5 2、3、5 2、3、5 后得到的数字。 这样,我…

电脑同时配置两个版本mysql数据库常见问题

1.配置时,要把bin中的mysql.exe和mysqld.exe 改个名字,不然两个版本会重复,当然,在初始化数据库的时候,如果时57版本的,就用mysql57(已经改名的)和mysqld57 代替 mysql 和 mysqld 例如 mysql -u root -p …

LLM 大模型学习必知必会系列(十):基于AgentFabric实现交互式智能体应用,Agent实战

LLM 大模型学习必知必会系列(十):基于AgentFabric实现交互式智能体应用,Agent实战 0.前言 **Modelscope **是一个交互式智能体应用基于ModelScope-Agent,用于方便地创建针对各种现实应用量身定制智能体,目前已经在生产级别落地。AgentFabri…

01.msf

文章目录 永恒之蓝下载msfconsolemsfvenom 永恒之蓝 下载 msdn.itellyou.cn msfconsole M e t a s p l o i t C y b e r M i s s i l e C o m m a n d Metasploit Cyber Missile Command MetasploitCyberMissileCommand 的简称 search ms17_010 use 0 或者 use exploit/wind…

Java入门基础教程-Java基础语法

Java是一种广泛使用的编程语言,其语法简洁明了,易于学习和掌握。本文帮助大家快速了解Java编程的基本概念和语法规则。 一、Java程序结构 Java程序由类(Class)组成,每个类可以包含变量(Variable&#xff…

telnet网络疏通——脚本案例

这段脚本主要是使用 bash 脚本进行 Telnet 连接测试,遍历了三个 IP 地址(192.168.20.11、192.168.20.22、192.168.20.33)以及三个端口号(22、80、443)。对每个 IP 地址和端口组合进行 Telnet 连接测试,如果…

从零开始:手把手教你使用Python实现PDF到Excel的转换

来百 在日常工作和学习中,我们经常会遇到需要将PDF文件中的数据提取到Excel表格中的情况。可能是为了进行数据分析、报告生成或者其他目的。虽然手动复制粘贴是一种方法,但对于大量的数据来说,这种方式显然效率太低。幸运的是,Py…

【相机开发问题总结】曝光补偿ExposureCompensation未生效异常分析及解决

问题描述 做一款相机应用时,用户反馈相机预览界面太暗了,由于我们是嵌入式设备,没有手机那么高大上得闪光灯补光,因此只能考虑从软件层面提高界面亮度,还好找到了曝光补偿,但是开发过程中发现曝光补偿未生…

npm 错误,ERESOLVE unable to resolve dependency tree

npm 错误,ERESOLVE unable to resolve dependency tree 在命令中增加 --legacy-peer-dep 选项或者–force npm install --legacy-peer-depsnpm install --force

保存商品信息功能(VO)

文章目录 1.分析前端保存商品发布信息的json数据1.分析commoditylaunch.vue的submitSkus1.将后面的都注销,只保留查看数据的部分2.填写基本信息3.保存信息,得到json4.使用工具格式化一下 2.使用工具将json转为model3.根据业务修改vo,放到vo包…

「网络流浅谈」最大流的应用

更好的阅读体验 二分图匹配 考虑如何将二分图匹配问题,转化为流网络。设置 1 1 1 个汇点和源点,从源点向二分图一侧的每一个点连边,从另一侧向汇点连边,边权均为 1 1 1,二分图中的边也全部加入,权值设为…

【第1章】SpringBoot入门

文章目录 前言一、版本要求1. SpringBoot版本2. 其他2.1 System Requirements2.2 Servlet Containers2.3 GraalVM Native Images 3. 版本定型 二、新建工程1.IDEA创建 ( 推荐 ) \color{#00FF00}{(推荐)} (推荐)2. 官方创建 三、第一个SpringBoot程序1. 引入web2. 启动类3. 启动…

Edge浏览器:重新定义现代网页浏览

引言 - Edge的起源与重生 Edge浏览器,作为Microsoft Windows标志性的互联网窗口,源起于1995年的Internet Explorer。在网络发展的浪潮中,IE曾是无可争议的霸主,但随着技术革新与用户需求的演变,它面临的竞争日益激烈。…

python中的一些基础概念

在python中整型数据可以和浮点型数据相加,在python中字符串数据可以进行相加, 在python中整型数据可以和布尔类型进行算术运算。此时True当做1,False当做0但是这样的操作是没有意义的, python中只有字符串类型没有字符类型&…

用这8种方法在海外媒体推广发稿平台上获得突破-华媒舍

在今天的数字时代,海外媒体推广发稿平台已经成为了许多机构和个人宣传和推广的有效途径。如何在这些平台上获得突破并吸引更多的关注是一个关键问题。本文将介绍8种方法,帮助您在海外媒体推广发稿平台上实现突破。 1. 确定目标受众 在开始使用海外媒体推…

篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)

篮球论坛系统 目录 基于SprinBootvue的篮球论坛系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍&#xff…

AI大模型探索之路-实战篇5: Open Interpreter开放代码解释器调研实践

系列篇章💥 AI大模型探索之路-实战篇4:DB-GPT数据应用开发框架调研实践 目录 系列篇章💥前言一、何为Open Interpreter?二、与 ChatGPT 的代码解释器比较三、 Open Interpreter的特性1、强大的本地计算能力2、丰富的功能3、高度的…