これはコードです。データを失わずに Web ページを更新したいのですが、データを URL アドレスに表示したくありません。
发送数据页面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})
接收数据页面A:
val:JSON.parse(this.$route.params.val)
这时刷新页面A，val就会报错undefined1. クエリを使用してパラメータを渡す場合、データは URL アドレスの後に接続されるため、Web ページを更新してもデータが失われることはありません。
发送数据页面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，数据正常存在,但是页面地址会变得很长，而且传递的数据也会暴露在外面。上記のアプローチは、データを失わずに Web ページを更新する必要性は満たしますが、2 番目の条件を満たさないため、データは URL アドレスに表示されます。あまり良くありません。
2. paramsを使用してパラメータを渡すと、データは URL アドレスに表示されません。
最初のコードでは、params を使用してパラメータを渡すため、データは URL アドレスに表示されませんが、Web ページを更新するとデータが失われます。だから、それもあまり良くないんです。
どうすればこれを達成できるでしょうか?
1: ブラウザーを使用して vue で Web ページを直接更新しても、vue ライフサイクルでbeforeDestory とdestroy の 2 つの関数がトリガーされません。ブラウザーがページを直接更新することは、URL に再度アクセスすることと同じであるためです。これは vue のライフサイクルとは関係ありません。
2: localStorage と sessionStorage の違い
localStorage に保存されているデータがアクティブに消去されない場合、ブラウザを閉じても、次回ブラウザを開いたときにデータが残ったままになります。それは長期的な存在です。
sessionStorage に保存されたデータは、ブラウザを閉じている限り自動的に消去されます。ただし、Webページを更新してもクリアされません。それは一時的な存在です。
上記の 2 つの知識ポイントに基づいて、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
//虽然浏览器刷新不会触发destory,但是会每次触发created。
created(){
//若条件为false则表示没存储过该数据。是第一次进入该页面。那么就把数据存入本地。
if(Boolean(sessionStorage.getItem('musicList')) == false) {
// 数据储存在本地存储里
sessionStorage.setItem('musicList', JSON.stringify(this.Id))
}
//若val==undefined则表示，该页面刷新过了。params数据没了。那么就从本地找出数据再赋值给val
if(this.val==undefined){
this.val= JSON.parse(sessionStorage.getItem('musicList'))
}
}
//当正常的从这个页面跳转到其他页面的时候会触发该函数，切到其他页面的时候就把该数据从本地存储删掉即可
beforeDestory(){
sessionStorage.removeItem('musicList')
}LocalStorage は、ユーザーがページ A にジャンプしてブラウザを直接閉じ、その後ブラウザを開いて URL を入力すると、ローカル ストレージからデータを見つけることができますが、sessionStorage がブラウザを閉じるとデータが消えるため、上記では使用されていません。localStorage の問題は発生しません。