vue params传参刷新网页数据丢失解决方法

这里有一段代码，我想让它刷新网页数据不会丢失的同时，还不希望数据显示在url地址里。

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})

接收数据页面A:
val:JSON.parse(this.$route.params.val)


这时刷新页面A，val就会报错undefined

1，当使用 query传参时，由于数据是拼接在url地址后面的，所以刷新网页不会导致数据丢失。

发送数据页面Q:
this.$router.push({name:'A',query:{val:JSON.stringify(val)}})

接收数据页面A:
val:JSON.parse(this.$route.query.val)


页面A地址:xxx/A?val=xxxxxxxxxxxxxx
这时刷新页面A，数据正常存在,但是页面地址会变得很长，而且传递的数据也会暴露在外面。

上面的做法虽然满足了刷新网页数据不丢失，但是没满足第二个条件，数据出现在url地址里了。所以不太好。

2，使用params传参，数据不会出现在url地址里。

最开始的代码就是使用的params传参，这样虽然可以让数据不出现在url地址里，但是刷新网页会导致数据丢失。所以也不太好。

那怎么样才能实现呢？

1：在vue 里 使用浏览器直接刷新网页是不会触发vue生命周期里beforeDestory 和destoryed 这两个函数的。因为浏览器直接刷新页面就相当于再次访问一遍这个网址。跟vue生命周期没关系的。

2：localStorage和sessionStorage 的区别

存储在localStorage里的数据如果不是主动去清除的话，就算浏览器关闭了，下次打开浏览器他还是会存在。是一个长期的存在。

存储在sessionStorage 里的数据只要关闭浏览器就会自动清除。但是刷新网页不会清除。是一个临时的存在。

基于以上两个知识点，可以利用vue里浏览器刷新不会触发beforeDestory生命周期函数和数据储存本地这两个方法来补全params刷新丢失数据的短板。

发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})

接收数据页面A:
val:this.$route.params.val==undefined?undefined:(JSON.parse(this.$route.params.val) || JSON.parse(sessionStorage.getItem('musicList')))
//params.val是否等于undefined?若为true则val赋值为undefined,若为false则利用短路运算符，若存在this.$route.params.val 则赋值给 val,若不存在则从sessionStorage里找数据赋值给val 


created(){
//虽然浏览器刷新不会触发destory,但是会每次触发created。
if(Boolean(sessionStorage.getItem('musicList')) == false) {
//若条件为false则表示没存储过该数据。是第一次进入该页面。那么就把数据存入本地。
      sessionStorage.setItem('musicList', JSON.stringify(this.Id))
      // 数据储存在本地存储里 
    }
if(this.val==undefined){
//若val==undefined则表示，该页面刷新过了。params数据没了。那么就从本地找出数据再赋值给val
 this.val= JSON.parse(sessionStorage.getItem('musicList'))
}
}

beforeDestory(){
//当正常的从这个页面跳转到其他页面的时候会触发该函数，切到其他页面的时候就把该数据从本地存储删掉即可
sessionStorage.removeItem('musicList')
}

上面没用到localStorage是因为如果用户跳转到页面A后，直接关闭浏览器，再打开浏览器输入网址，就能从本地存储找到该数据，但是sessionStorage关闭浏览器，数据就消失了。不会出现localStorage的问题。