1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【VUE】两种vue跳转地址传递参数的方法

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

时间:2023-05-22 02:16:03

相关推荐

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

第一种方式 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)}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。