vue query 路由传参，页面刷新数据丢失，页面加载不出来

• 首先来说我写项目遇到的问题，点击站内信的某一条数据跳转到此数据的详情页面，点击浏览器的刷新按钮，刷新页面地址栏的内容存在，但是页面数据丢失。

this.$router.push(
{
path: '/路径', 
query: {workId: this.workId}
}
)

接收数据

    let workId = this.$route.query.workId 

就是这样写了发现页面刷新会丢失数据

最后经过各种实验，发现存储在localStorage中，会解决数据丢失问题

let worId = 传的参数
localStorage.setItem('存的名字', worId)
this.$router.push({path: '/路径', query: {workId: worId}})

    let workId = localStorage.getItem('存的名字')
    

记得离开页面时销毁存储的内容

 destroyed() {
    localStorage.removeItem('存的名字')
  },

但是这样的话会存在数据暴露的风险，所以可以给localStorage保存的参数加密

let worId = window.btoa(window.encodeURIComponent(JSON.stringify(workId )))
localStorage.setItem('存的名字', worId)

接收数据

let workId = JSON.parse(decodeURIComponent(window.atob(localStorage.getItem('存的名字'))))

当然最后也记得销毁存储的内容，不删的话，
1.通过路径再次进入此页面，还是会使用上次页面出去时存储的数据。
2.不删除会存在数据丢失或损坏风险