@query传参_vue-router中params传参和query传参的区别及处理方法

在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

这里我们主要采用对象跳转形式。

要跳转页面的path属性值:router.push({ path: 'my-exchange' }),对应router数组对象中的path属性值:

11bfde185678adb39fa5237d8c430685.png

要跳转页面的name属性值:router.push({ name: 'my-exchange-index' }),对应router数组对象中的name属性值:

34cf14ca37d013c7f1c01db35e5f375e.png

给页面传参则在push函数传入的实参对象中的第二个属性传入 queryparams对象即可,对象中写具体要传的参数(注:如果queryparams对象中的属性传入的有引用类型的,则需要JSON.stringify(引用类型)转化一下)。

021891aa9fc1c7ec3b4920467cd05484.png

在对应的页面接收也只需要:this.$route.querythis.$route.params:

254beee542e94c89cca7209f1e8906cb.png

官方解释:

78161af3c14258a4e6021c732b610bd9.png

其中我个人建议对象的第一个属性用name来控制要跳转的页面,因为如果是path的话,params属性将会被忽略(也就是说传参要采用拼接字符串的方式,超不利于代码越多,看的还不舒服)。

同时对于第二个属性,我个人建议采用query来进行路由传参,因为 params 对象传参,只要页面一刷新你传入的参数就没了,query则保存在url地址中,你怎么刷新它都还在。

小总结一下:

使用params传参在浏览器的url地址栏中是不可见得,query则类似于get传参,是可见的。

params传参会丢失数据,query不会。

不过虽然params传参会丢失数据,但是它不会污染 url 路径,会显得 url 路径特别的整洁干净。

所以偶尔也会使用params传参。

当然啦,也有很多方法可以处理params传参会丢失数据问题,比如通过Cookies来存储数据即可。

62722b3b5948bfff5066a610666abaf9.png

在页面进入就执行的生命周期函数中看一下 this.$route.params 中有没有东西,如果有,则把它存到 Cookies 里面如果页面刷新了,数据没了,则直接从Cookies 里面拿即可。

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

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

相关文章

JS成员函数声明位置优化

上代码 function A() {this.a function(){}; } a1 new A(); a2 new A(); alert( a1.aa2.a);输出 说明了a1.a,a2.a指向的内存不是同一个,也就是每个对象都有一份自己的函数,只不过一个类的所有实例之间的函数长得是一样的! 所以…

mybatis plus 事务管理器_SpringBoot第七篇:springboot开启声明式事务

springboot开启事务很简单,只需要一个注解Transactional 就可以了。因为在springboot中已经默认对jpa、jdbc、mybatis开启了事事务,引入它们依赖的时候,事物就默认开启。当然,如果你需要用其他的orm,比如beatlsql&…

JS静态变量和静态函数

function A(){this.id "我是AA"} // 在构造函数外定义的都是所有对象共享的 A.id "我是A"; A.sayId function(){alert(A.id);} A.sayId(); 如上,在构造函数外用函数名定义的属性或者方法,可以也只可以通过函数名来访问&…

Spark读取HDFS上的Snappy压缩文件所导致的内存溢出问题 java.lang.OutOfMemoryError: GC overhead limit exceeded

报错java.lang.OutOfMemoryError: GC overhead limit exceeded HDFS上有一些每天增长的文件,使用Snappy压缩,突然某天OOM了 1.原因: 因为snappy不能split切片,也就会导致一个文件将会由一个task来读取,读取后解压,数…

【转】VS编程,快速折叠或者展开代码到 #region 级别的设置方法。

在代码比较多的文档中,使用#region进行分功能的区分折叠是一个方便的方法。 如果文档中含有很多个#region标签,想一次全部折叠或者展开,有时是必要的。 这里给出一种设置方法,适用于VS2019,其它VS版本请自己验证。 1、…

.net一个函数要用另一个函数的值_Mysql:条件判断函数-CASE WHEN、IF、IFNULL详解

前言在众多SQL中,统计型SQL绝对是让人头疼的一类,之所以如此,是因为这种SQL中必然有大量的判读对比。而条件判断函数就是应对这类需求的利器。本文重点总结CASE WHEN、IF、IFNULL三种函数。1 CASE WHENCase when语句能在SQL语句中织入判断逻辑…

Spark2内存调优总结 - 内存划分 与 内存计算 与 调参方式

使用的Spark2以上版本所以只考虑UnifiedMemoryManager动态内存管理,如图: 1. 内存划分 与 内存计算 与 调参方式 1.1 三部分:Spark内存、用户内存、预留内存 预留内存:300MB 固定Spark内存和用户内存比例由参数spark.memory.fra…

java 通过id获取html代码_Maven私服安装配置,java通过私服下载代码,并打包后上传到私服(Nexus)...

Maven私服一般安装Nexus。首先,Nexus下载,访问Nexus官方网址https://www.sonatype.com/download-nexus-repo-oss下载完成后是个压缩包第二步 配置:1)将上一步下载的nexus解压2)端口和监听配置application-port:监听端口applicatio…

一些网站github等无法连接服务器的解决办法

1.打开站长工具 http://tool.chinaz.com/speedtest/ 2.搜索github.com/ 3. 点击总耗时-排序 4. 拿到延迟最低的ip地址20.205.243.166 5.修改本地dns windows:C:\Windows\System32\drivers\etc 修改hosts文件,末尾添加 20.205.243.166 github.com Lin…

【转】异步编程系列(Thread、Task、async/await、ajax等)

序 经过一番努力,我写的异步编程系列也算有头有尾,当然不是说这个系列已经更新完毕,这个头尾只是表示新旧知识点都有简单涉及到,接下去我还会丰富这一系列并且有机会整个小应用(愿景是弄一个开源组件吧,结合…

linux里qt画直线_Qt与Web混合开发(一)简单使用

前言《Qt与Web混合开发》系列文章,主要讨论Qt与Web混合开发相关技术。这类技术存在适用场景,例如:Qt项目使用Web大量现成的组件/方案做功能扩展,Qt项目中性能无关/频繁更新迭代的页面用html单独实现,Qt项目提供Web形式…

ES curator离线安装与部署

1.版本: es:6.5.1 curator:5.8.4 下载地址:https://www.elastic.co/guide/en/elasticsearch/client/curator/current/yum-repository.html#_signing_key_2 2.连接不上网站怎么办? 出现无法访问此网页的话&#xff0…

【转】1.1异步编程:线程概述及使用

从此图中我们会发现 .NET 与C# 的每个版本发布都是有一个“主题”。即:C#1.0托管代码→C#2.0泛型→C#3.0LINQ→C#4.0动态语言→C#5.0异步编程。现在我为最新版本的“异步编程”主题写系列分享,期待你的查看及点评。 传送门:异步编程系列目录……

安装python3.7.0的步骤_python 3.7.0 安装配置方法图文教程

本文记录了python 3.7.0 安装配置方法,供大家参考,具体内容如下 s1登入python官网 s2下载后缀为exe的可执行文件,并根据自己电脑/主机的系统选择32位还是64位。双击选择“python for windows”() 出现选择下载页面&…

ES:记录curator+nfs进行索引备份、创建快照的一次实践

1. 安装curator工具 下面是我离线安装的过程 https://blog.csdn.net/weixin_43736084/article/details/121775484?spm1001.2014.3001.5501 2.使用fs建立es存储库 我们使用NFS,下面是官网给出的几种仓库类型 2.1 fs建立存储库的注意事项 注意事项,…

【转】1.2异步编程:使用线程池管理线程

从此图中我们会发现 .NET 与C# 的每个版本发布都是有一个“主题”。即:C#1.0托管代码→C#2.0泛型→C#3.0LINQ→C#4.0动态语言→C#5.0异步编程。现在我为最新版本的“异步编程”主题写系列分享,期待你的查看及点评。 传送门:异步编程系列目录……

python matplotlib画散点图_python matplotlib库绘制散点图例题解析

假设通过爬虫你获取到了北京2016年3,10月份每天白天的最高气温(分别位于列表a,b),那么此时如何寻找出气温随时间(天)变化的某种规律? a [11,17,16,11,12,11,12,6,6,7,8,9,12,15,14,17,18,21,16…

Hadoop集群HDFS各节点磁盘使用率不平衡,使用balancer做数据平衡

HDFS上各节点磁盘大小不一致,新增节点 数据平衡前,是非常不均衡的,某些节点已经接近90了 集群的数据平衡已经迫在眉睫,必须要搞一搞了。 1.设置传输速率 我这里是万兆网卡,就先设置100M了 在两台master上分别执行&a…

【转】1.3异步编程:线程同步基元对象

开始《异步编程:同步基元对象(上)》 示例:异步编程:线程同步基元对象.rar 如今的应用程序越来越复杂,我们常常需要多线程技术来提高我们应用程序的响应速度。每个线程都由自己的线程ID,当前指令…

怎么查询共享使用人_企业微信微盘怎么共享使用?企业微信如何设置微盘权限?...

使用企业微信办公时,如果有文件需要共享给员工,我们可以将文件上传到微盘的共享空间中,让员工自行下载并查看。那么在企业微信中,我们该如何创建共享空间呢?1如何创建微盘共享空间企业微信微盘共享空间分为两种&#x…