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