如何解決vue-router路由參數(shù)刷新消失的問題

這篇文章主要為大家展示了“如何解決vue-router路由參數(shù)刷新消失的問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決vue-router路由參數(shù)刷新消失的問題”這篇文章吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、周至網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為周至等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

場景：vue-router實(shí)現(xiàn)的單頁應(yīng)用，登錄頁調(diào)用登錄接口后，服務(wù)器返回用戶信息，然后通過router.push({name: 'index', params: res.data})傳給主頁組件，并在主頁顯示數(shù)據(jù)。但是刷新頁面后，數(shù)據(jù)就消失了。

解決方案：

1、session&服務(wù)器渲染

傳統(tǒng)的方案是，登錄頁和主頁是單獨(dú)的兩個頁面，登錄成功后服務(wù)器生成用戶信息對應(yīng)的session，然后渲染主頁數(shù)據(jù)，并通過響應(yīng)頭將sessionid傳給瀏覽器并生成相應(yīng)的cookie文件。這樣下次請求頁面時，瀏覽器會在http header帶上相應(yīng)的cookie，然后服務(wù)器根據(jù)cookie中的sessionid判斷用戶是否登錄，再顯示用戶數(shù)據(jù)。
如果項(xiàng)目采用前后端分離思想，服務(wù)器只提供接口，不進(jìn)行服務(wù)器渲染，那么這種辦法是行不通了。

2、$route.query

我們可以在路由跳轉(zhuǎn)的時候帶上登錄請求的參數(shù)：

router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
 url: 'xxx',
 method: 'post',
 data: {
  username: this.$route.query.username,
  password: this.$route.query.password
 }
})

這樣登錄參數(shù)會被保存在url中，像這樣：“http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx”，然后在created鉤子中調(diào)用登錄接口來返回?cái)?shù)據(jù)。

即使密碼進(jìn)行了md5加密，將用戶名密碼這類敏感信息放在url中肯定也是不合理。

3、cookie

另一個辦法是把登錄參數(shù)存入cookie，然后在created鉤子中獲取cookie中存的信息，再調(diào)用登錄接口。將用戶名密碼存入cookie中同樣不合理，改進(jìn)版是登錄成功后服務(wù)器返回一個token，在有效期內(nèi)通過token獲取用戶數(shù)據(jù)。

cookie存取數(shù)據(jù)比較麻煩，因?yàn)閏ookie中鍵值對是字符串并以 "=" 鏈接，需要額外寫操作cookie的方法。

<script>
 function setCookie (name, value, exdays) {
  let date = new Date()
  date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
  let expires = "expires=" + date.toGMTString()
  document.cookie = name + "=" + value + "; " + expires
 }
 function getCookie (name) {
  name = name + "="
  let cookieArr = document.cookie.split(';')
  for (let i = 0; i < cookieArr.length; i++) {
   let cookie = cookieArr[i].trim()
   if (cookie.indexOf(name) === 0) {
    return cookie.slice(name.length)
   }
  }
  return ""
 }

4、HTML5 Web存儲

提到Web存儲，潛意識肯定覺得很多瀏覽器都不支持，其實(shí)IE8及以上都支持localStorage和sessionStorage了。Vue項(xiàng)目最低支持IE9，所以可以放心的使用Web存儲。

localStorage存儲數(shù)據(jù)沒有時間限制，不主動刪除就不會失效。而sessionStorage是在頁面或者瀏覽器關(guān)閉時就會失效，適合本場景應(yīng)用。

我們可以把token信息存在sessionStorage中，然后每次刷新頁面通過token請求數(shù)據(jù)；但是既然能夠把token存儲到本地，為什么不直接把常用的數(shù)據(jù)直接保存到本地呢？利用本地?cái)?shù)據(jù)，可以減少客戶端網(wǎng)絡(luò)請求，還可以降低服務(wù)器負(fù)擔(dān)。

由于localStorage和sessionStorage是只讀的，不能直接將其指向一個對象。也不能利用Object.assign()復(fù)制對象，因?yàn)橹禃兂勺址?quot;[object Object]"，所有只有通過循環(huán)為 sessionStorage 添加屬性了。

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

以上是“如何解決vue-router路由參數(shù)刷新消失的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：如何解決vue-router路由參數(shù)刷新消失的問題
分享URL：http://bm7419.com/article42/gejiec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、網(wǎng)站導(dǎo)航、商城網(wǎng)站、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容