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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐