vue 页面间使用路由传参数,刷新页面后获取不到参数的问题

情况

情况再简单说明一下: 有三个页面(a-列表页面,b-内页1,c-内页2),页面a->页面b->页面c有参数传递.从a进入b后,刷新b页面拿不到a页面传进来的参数.或者b页面再进入c页面,并由c页面返回b页面,b页面丢失a页面传入的参数.

参数的传递使用的是vue-router, query传参

let para = {
			id: info.subjId,
			subjInit: info.subjInit,
      subjectGuid: info.subjectGuid,
      visitNo: info.visitNo
		}
		this.$router.push({path:'/sign_in_already_detail',query:{para:  para }})

首先说明一下,使用路由的query传参是可以在刷新的时候保留参数的

之所以出现上面的问题是因为:在query传参数的时候没有对对象参数序列化--就是没有转成字符串.

所以b页面(接收参数的页面)的路由展示是下图这样. 只有在第一次进入b页面的时候能够拿到参数,之后就获取不到了

解决办法也就很明了了,在传参数的时候对象参数需要序列化处理

let para = {
			id: info.subjId,
			subjInit: info.subjInit,
      subjectGuid: info.subjectGuid,
      visitNo: info.visitNo
		}
		this.$router.push({path:'/sign_in_already_detail',query:{para: JSON.stringify( para) }})

这样进入b页面的路由就是如下图这样的,即使在刷新页面后地址也是不会变的.

不过使用路由传参对于参数的格式以及字符长度我还不是很清楚,猜测字符长度和一般网页get请求中url的长度差不多.所以参数字符过长还是不适合使用路由传参

其他页面间传参方法

1. bus 传参
   
   2.vue-router的params传参数
   
   3.利用浏览器的sessionStorage,localStorage,Cookie传参