VUE页面跳转刷新参数丢失问题解决

VUE页面跳转刷新参数丢失问题解决

一、场景

在做本司一个系统的前台过程中，对展示的数据需要进行出修改。也就是简单的表单提交进行数据修改

二、实现

在以前的开发过程中都是将数据放到session中，由于本次用到的框架为VUE，所以在页面跳转以后参数存储问题，本人是费尽心思，苦于无解，在我点击修改之后。第一次在create方法里面是能够获取到参数的。但是，在f5刷新之后发现并没有参数。（我利用的是VUE自带的$router.push({name:'',params{}})）的方式。然而并没有任何效果具体代码如下

create(){
	const device_id = this.$route.params.device.device_id
	// 进行数据加载
	}

F5之后，页面获取不到

三、过程

经过排查搜索，以及寻找度娘。首先我找到一种方案，就是在router.js中配置路由的参数在对应的path中配置,具体参考链接点这里,可能是我自己的框架原因，参照了文中的方法并没有效果。一种方案不行，那就第二种。于是我又找到了vuex的store利用它来管理全局属性，万万没想到它也是在刷新之后不能使用。那第三种吧 就是h5自带的sessionStoreage和localStoreage,发现这两个东西真的是非常棒，首先sessionStoreage是将数据放到session中(临时)，直到浏览器关闭为止，而localStoreage是放在本地存储中(持久)，想了想还是sessionStoreage好一点，毕竟程序员都很懒，其实是我不想再去往代码中添加一个清除的代码很累。

---

在经过一番探索之后，发现sessionStoreage存完数据以后拿出来的是一个Object，lz还是无法获取其属性，由于后台搞的时间久了，以为会跟后台一样传了对象就可以直接调用，再找度娘发现了一偏sessionStoreage的使用 链接在这里，ok至此结合vuex的store与sessionStoreage的setItem和getItem方法成功解决问题

四、总结

后来发现其实不止一种思路。目前来讲，我本人知道的有四种：

1、利用vue自带的编程式跳转，传参的方式为query，但是query传参需要注意一些数据不想暴露的时候，不建议使用。

2、利用cookie，将数据放到cookie中，在页面跳转以后再从cookie中取出来。

3、 利用sessinStoreage将数据存到session中，对session数据进行存取

4 、利用localStoreage将数据存到localStoreage中，但是不及时清理的话会导致硬
盘负担增加

说在最后： 上面内容如有不对的地方请大家多多指教，也希望本文能够帮助到哪些需要帮助的正在编程路上的人。

---

补充一下： sessionStroage必须保存字符串类型，如果保存为其他类型也会保存为字符串类型，只不过保存完以后可能不是我们想要的结果，比如保存一个Object 取出来的字符串就是‘Object object’