快捷導(dǎo)航

解決vue頁面刷新或者后退參數(shù)丟失的問題

更新時(shí)間：2018年03月13日 09:03:56 作者：panyox

下面小編就為大家分享一篇解決vue頁面刷新或者后退參數(shù)丟失的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

在toB的項(xiàng)目中，會(huì)經(jīng)常遇到列表數(shù)據(jù)篩選查詢的情景，當(dāng)要打開某一項(xiàng)的詳情頁或者暫時(shí)離開列表頁，再返回（后退時(shí)），選擇的篩選條件會(huì)全部丟失，辛辛苦苦選擇好的條件全沒了，還得重新選擇，如果有分頁的更頭大，還得重新一頁頁翻到之前看到的那一頁，用戶體驗(yàn)極度不友好。

我的解決有兩種：

第一種方法：用vue 的<keep-alive>，即在<router-view>外套一層<keep-alive>。

雖然可以達(dá)到一定效果，但是控制起來比較麻煩，比如項(xiàng)目中并不是所有頁面都需要緩存，代碼寫起來復(fù)雜

第二種方法：直接用localStorage，簡單粗暴（推薦）

代碼如下：

list.vue

export default {
    data () {
      return {
        searchForm:{
          project_name:'',
          status:'',
          city:'',
          round:'',
          fund:'',
          charge:'',
          page: 1
        },
      },
      beforeRouteLeave(to, from, next){
      //打開詳情頁（或者下一個(gè)任意界面）之前，把篩選條件保存到localStorage，如果離開列表頁并且打開的不是詳情頁則清除，也可以選擇不清除
      if (to.name == 'Detail') {
        let condition = JSON.stringify(this.searchForm)
        localStorage.setItem('condition', condition)
      }else{
        localStorage.removeItem('condition')
      }
      next()
    },
    created(){
      //從localStorage中讀取條件并賦值給查詢表單
      let condition = localStorage.getItem('condition')
      if (condition != null) {
       this.searchForm = JSON.parse(condition)
      }
      this.$http.get('http://example.com/api/test', {params: this.searchForm})
      .then((response)=>{
        console.log(response.data)
      }).catch((error)=>{
        console.log(error)
      })
    }
  }
}

這種方法也受限于localStorage的局限性，不過可以通過使用cookie來彌補(bǔ)，具體不再詳述。

以上這篇解決vue頁面刷新或者后退參數(shù)丟失的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

帶你熟練掌握Vue3之Pinia狀態(tài)管理
pinia是vue3官方的狀態(tài)管理工具,當(dāng)然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強(qiáng)、更好,下面這篇文章主要給大家介紹了關(guān)于Vue3之Pinia狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下
2022-11-11
利用Vue+ElementUi實(shí)現(xiàn)評(píng)論功能
這篇文章主要介紹了如何利用Vue+ElementUi實(shí)現(xiàn)評(píng)論功能,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-04-04
vue中數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue3實(shí)現(xiàn)刷新頁面局部內(nèi)容的示例代碼
本文主要介紹了Vue3實(shí)現(xiàn)刷新頁面局部內(nèi)容的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
用uniapp寫一個(gè)好看的登錄頁面
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,移動(dòng)端app的使用越來越普及,而對(duì)于開發(fā)者來說如何設(shè)計(jì)一款簡單易用的app是一項(xiàng)不容忽視的工作,其中登錄頁面是app使用過程中最基礎(chǔ)的組成部分之一,這篇文章主要給大家介紹了關(guān)于用uniapp寫一個(gè)好看的登錄頁面的相關(guān)資料,需要的朋友可以參考下
2024-03-03
關(guān)于vue-admin-template模板連接后端改造登錄功能
這篇文章主要介紹了關(guān)于vue-admin-template模板連接后端改造登錄功能,登陸方法根據(jù)賬號(hào)密碼查出用戶信息，根據(jù)用戶id與name生成token并返回，userinfo則是對(duì)token進(jìn)行獲取，在查出對(duì)應(yīng)值進(jìn)行返回，感興趣的朋友一起看看吧
2022-05-05
vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)實(shí)時(shí)上傳文件進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
iview實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了iview實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個(gè)組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個(gè)響應(yīng)式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下
2024-10-10
vue中如何配置proxy代理
這篇文章主要介紹了vue中如何配置proxy代理問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01