首頁 > web前端 > js教程 > 主體

解決vue頁面刷新或後退參數遺失的問題

亚连
發布: 2018-05-30 17:23:21
原創
2553 人瀏覽過

下面我就為大家分享一篇解決vue頁面刷新或後退參數遺失的問題,具有很好的參考價值,希望對大家有幫助。

在toB的項目中,會經常遇到列表資料篩選查詢的情景,當要打開某一項的詳情頁或暫時離開列表頁,再返回(後退時),選擇的篩選條件會全部遺失,辛苦選擇好的條件全沒了,還得重新選擇,如果有分頁的更頭大,還得重新一頁頁翻到之前看到的那一頁,用戶體驗極度不友善。

我的解有兩種:

#第一種方法:用vue的,即在外套一層

雖然可以達到一定效果,但是控制起來比較麻煩,例如專案中並不是所有頁面都需要緩存,程式碼寫起來複雜

第二種方法: 直接用localStorage,簡單粗暴(建議)

程式碼如下:

list.vue

export default {
    data () {
      return {
        searchForm:{
          project_name:'',
          status:'',
          city:'',
          round:'',
          fund:'',
          charge:'',
          page: 1
        },
      },
      beforeRouteLeave(to, from, next){
      //打开详情页(或者下一个任意界面)之前,把筛选条件保存到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)
      })
    }
  }
}
登入後複製

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

vue頁面載入閃爍問題的解決方法

#淺聊js取得ModelAndView值的問題

vue渲染時閃爍{{}}的問題與解決方法

以上是解決vue頁面刷新或後退參數遺失的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!