【VUE】两种vue跳转地址传递参数的方法

2024-05-09 20:48:46

第一种方式 query

一、根据$router.push({path:‘/…’,query：{} }在query里面增加参数对象

vm.$router.push({path: '/approve_message_view',query: {object: object } // 其中object为传递参数的对象
})

其中path的value为

router.js里面配置的路径地址，这种传递方式的特点是，会在地址栏上显示出参数，类似于get请求带出来的requestParam，即http://localhost/getSomethind?id=xx&name=xx,这时候参数是可以this.$router.query里面获得，由于你的参数存在在地址栏上，这时候刷新页面参数数据会保留；这就区别我们的第二种方式；

第二种方式 params

二、根据$router.push({name:‘/…’,params：{} }在params里面增加参数对象

vm.$router.push({name: "approve_message_view",params: {object:objectt}
})

其中name的value为

在params的参数里面，这种传递方式就是类似于post请求了，请求参数藏在requestBody里面，不会在地址上面出现参数；优点不言而喻，就是有效避免给别人直接看到我们传递的参数，还有就是地址栏能容纳的数据有限，用这种方式传递较大的参数对象；不过刷新页面的时候会出现页面数据获取不到的问题，简单理解就是参数数据没有存在地址栏上面导致获取不到；

这个时候为了避免刷新数据拿不到数据而且有想要去获取大量数据的时候，怎么办呢？？！！

第三种方式 sessionStorage

这里给出第三种方式，但是这种方式跟vue的特性没有关系，这种方式是由session来存储，JSON去stringify和parse对象，利用sessionStorage却获取和存储对象。众所周知，session为浏览器结束时销毁，而且可以存储大量的数据对象，位于服务器端，安全可靠。
这里直接这样使用

sessionStorage.setItem('object', JSON.stringify(object))
let object = JSON.parse(sessionStorage.getItem('object'))

总结使用

approve.vue

methods:{push(){//跳到新页面vm.$router.push({name: "approve_message_view",})sessionStorage.setItem('object',object) }
}

approve_message_view.vue

mounted(){let object= JSON.parse(sessionStorage.getItem("object"));console.log(object)
}

【VUE】两种vue跳转地址传递参数的方法相关推荐

转：Web页面通过URL地址传递参数常见问题及检测方法
Web页面即我们在浏览器中所看到的网页,在Web应用程序中,其页面往往需要进行动态切换和数据交互,页面间的数据常规传递方法有多种,本文主要介绍Web页面处理程序中常见的URL地址参数传递方法,包括概述 ...
[Xcode 实际操作]九、实用进阶-(24)使用Segue(页面的跳转连接)进行页面跳转并传递参数...
目录:[Swift]Xcode实际操作本文将演示使用Segue(页面的跳转连接)进行页面跳转并传递参数. 参照结合:[Xcode10 实际操作]九.实用进阶-(23)多个Storyboard故事板中 ...
php页面跳转参数传递参数,php页面跳转怎样传递参数
[摘要] PHP即"超文本预处理器",是一种通用开源脚本语言.PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言.PHP独特的语法混合了C.Java.Perl以及 ...
iphone已停用怎么解锁_两种无密码解锁iPhone锁屏密码的方法
现在很多手机都配备指纹解锁功能,大家平时用惯了指纹解锁,有时候在需要输入锁屏密码的时候反倒记不清密码是什么了.像是手机重启后就需要输入密码解锁,iPhone锁屏密码忘了怎么办? 多次输入错误密码还可能 ...
[html] 在两个iframe之间传递参数的方法有哪些？
[html] 在两个iframe之间传递参数的方法有哪些? 通过postMessage与父级通过,父级传递消息通过websocket通信如果是同一个域名下可用stroage,监听storageChan ...
python列表去重函数_对python中两种列表元素去重函数性能的比较方法
测试函数: 第一种:list的set函数第二种:{}.fromkeys().keys() 测试代码: #!/usr/bin/python #-*- coding:utf-8 -*- import t ...
两种在QGIS中打开CAD文件的方法
概述经常使用ArcGIS.Global Mapper和水经微图打开CAD文件,一般都是直接拖进去或者点一下类似打开的按钮就可以打开CAD文件,但是当直接把CAD文件拖入到QGIS的时候会报错,所以查 ...
HTML 页面跳转时传递参数（jquery.params.js）
HTML 页面跳转时传递参数(jquery.params.js) 描述:在 HTML 页面跳转时,通过 URL 传递参数一.引入在解析参数页面的 JS 中引入:jquery.params.js(代 ...
[html] 在两个iframe之间传递参数的方法有哪些
[html] 在两个iframe之间传递参数的方法有哪些通过postMessage与父级通过,父级传递消息通过websocket通信如果是同一个域名下可用stroage,监听storageChang ...

最新文章

热门文章