快捷導(dǎo)航

vue刷新頁(yè)面后params參數(shù)丟失的原因和解決方法

更新時(shí)間：2023年12月14日 10:22:57 作者：UserGuan

這篇文章主要給大家介紹了vue刷新頁(yè)面后params參數(shù)丟失的原因和解決方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

頁(yè)面跳轉(zhuǎn)($router)方式

方式一(刷新頁(yè)面參數(shù)會(huì)丟失)

此方法不會(huì)在瀏覽器 url 地址欄中顯示傳遞的參數(shù)

this.$router.push({ name: 'a', params: { name: '張三', age: '18' }}) // 頁(yè)面跳轉(zhuǎn)
 
this.$route.params // 參數(shù)接收

方式二(刷新頁(yè)面參數(shù)不會(huì)丟失)

此方法會(huì)在瀏覽器 url 地址欄中顯示傳遞的參數(shù)(數(shù)據(jù)會(huì)暴露在外面)，即：'a?name=張三&age=18'

this.$router.push({ path: 'a', query: { name: '張三', age: '18' }}) // 頁(yè)面跳轉(zhuǎn)
 
this.$route.query // 參數(shù)接收

刷新頁(yè)面后 params 參數(shù)丟失

發(fā)送數(shù)據(jù)的頁(yè)面A

this.$router.push({ name: 'A', params: { name: '張三', age: '18' }})

接收數(shù)據(jù)的頁(yè)面B

this.curObj = this.$route.params

當(dāng)進(jìn)入 B 頁(yè)面后，按 F5 刷新頁(yè)面 B 頁(yè)面接收的參數(shù)會(huì)丟失。

解決辦法

使用 localStorage 或 sessionStorage 瀏覽器自帶的 mini 數(shù)據(jù)庫(kù)(即本地存儲(chǔ))

存儲(chǔ)在 localStorage 里的數(shù)據(jù)如果不是主動(dòng)去清除的話(huà)，就算瀏覽器關(guān)閉了，下次打開(kāi)瀏覽器數(shù)據(jù)還是會(huì)存在，是一個(gè)長(zhǎng)期的存在。

存儲(chǔ)在 sessionStorage 里的數(shù)據(jù)只要關(guān)閉瀏覽器就會(huì)自動(dòng)清除，但是刷新網(wǎng)頁(yè)不會(huì)清除，是一個(gè)臨時(shí)的存在。

可以利用 vue 里瀏覽器刷新不會(huì)觸發(fā) beforeDestory 生命周期函數(shù)和數(shù)據(jù)儲(chǔ)存本地這兩個(gè)方法來(lái)補(bǔ)全 params 刷新丟失數(shù)據(jù)的短板。

發(fā)送數(shù)據(jù)的頁(yè)面A

this.$router.push({ name: 'A', params: { name: '張三', age: '18' }})

接收數(shù)據(jù)的頁(yè)面B

mounted() {
  let routeParam = this.$route.params
  if (Object.entries(routeParam).length === 0) {
    routeParam = JSON.parse(sessionStorage.getItem('storageObj')) // 從本地存儲(chǔ)中獲取數(shù)據(jù)
  } else {
    sessionStorage.setItem('storageObj', JSON.stringify(routeParam)) // 將數(shù)據(jù)儲(chǔ)存在本地存儲(chǔ)里面
  }
  this.curObj = routeParam
},
beforeDestroy() {
  sessionStorage.removeItem('storageObj') // 將數(shù)據(jù)從本地存儲(chǔ)刪掉
},

沒(méi)有用 localStorage 是因?yàn)槿绻脩?hù)跳轉(zhuǎn)到頁(yè)面 B 后，直接關(guān)閉瀏覽器，再打開(kāi)瀏覽器輸入網(wǎng)址，就能從本地存儲(chǔ)找到該數(shù)據(jù)，但 sessionStorage 關(guān)閉瀏覽器，數(shù)據(jù)就消失了。不會(huì)出現(xiàn) localStorage 的問(wèn)題。

以上就是vue刷新頁(yè)面后params參數(shù)丟失的原因和解決方法的詳細(xì)內(nèi)容，更多關(guān)于vue刷新頁(yè)面后params丟失的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: