Vue 使用History記錄上一頁面的數據

時間 2019-12-04

標籤 vue 使用 history 記錄上一頁面的數據简体版

原文原文鏈接

UI

需求

從列表頁的第二頁進入詳情頁，返回時列表頁仍然顯示在第二頁；
從列表頁的第二頁進入詳情頁，返回時列表頁的篩選條件仍然存在。

html

技術選擇

使用vue-router組件，經過this.$router.push({path: path, query: query});方式，將頁碼和選擇條件做爲參數存儲在url中，這種方式在上面的UI設計中是可行的，可是當列表頁中包含tab組件時（分頁組件是公用的），會由於push的因素（由於push會打開新頁面）致使一些問題（PS：也多是本人技術能力的緣由），未實現。
使用History API（HTML5開始支持），經過history.replaceState方式，將頁碼做爲參數存儲在url中，將選擇條件存儲在history中（尚不清楚數據具體是存儲在哪裏）；經過location.hash方式獲取頁碼；經過history.state方式獲取存儲的選擇條件。

具體實現--技術選擇2

開關

爲分頁組件添加一個開關（openroute），由於須要灰度上線，萬一有問題，要調整的頁面也只有一個。代碼以下：vue

<script>
  export default {
    props: {
      openroute: {
        type: Boolean,
        default: () => (true)
      }
    },
  }
</script>

分頁組件中存儲`頁碼`和`選擇條件`&獲取`頁碼`

<script>
  export default {
    methods: {
      fetchData(page) {
          //請求參數
        let params = this.params;
        //請求頁碼
        let newPage;
        //openroute處理
        if (this.openroute) {
          //爲url添上#page
          if (page) {
            history.replaceState(params.data, document.title, "#" + page);
          } else {
            if (history.state) {
              if (!history.state.key && location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                if (JSON.stringify(history.state) !== JSON.stringify(params.data)) { //選擇條件變動則請求第一頁
                  history.replaceState(params.data, document.title, "#1");
                } else {
                  history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
                }
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            } else {
              if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
                history.replaceState(params.data, document.title, "#" + location.hash.split("#")[1]);
              } else {
                history.replaceState(params.data, document.title, "#1");
              }
            }
          }
          //獲取url後面的#page
          if (location.hash && location.hash.split("#") && location.hash.split("#")[1]) {
            newPage = Number(location.hash.split("#")[1]);
          } else {
            newPage = 1;
          }
        } else {
          newPage = page;
        }
        //請求數據，得到結果，傳遞給列表頁面
      }
    }
  }
</script>

列表頁面獲取`選擇條件`

目前多是由於框架設計的問題，無法在請求數據以前經過Object.assign方式爲替換初始變量，因此先這樣處理（笨方法，各位大佬有解決辦法麻煩指導下，謝謝）：vue-router

<script>
  export default {
    data() {
      return {
        form: {
          aaa: (history.state && history.state.aaa) ? history.state.aaa : null,
          bbb: (history.state && history.state.bbb) ? history.state.bbb : null,
          ccc: (history.state && history.state.ccc) ? history.state.ccc : null
        },
      };
    }
  };
</script>

已解決，初始變量不須要動，能夠經過如下方式實現：瀏覽器

created(){
  //獲取緩存的數據
  if (history.state) {
    Object.assign(this.form, history.state)
    if (this.form.key) {
      delete this.form.key
    }
  }
},

這裏記錄下：以前覺得created方法是在分頁組件的watch監聽以後執行的，後來發現被誤導了（由於以前是經過Object.assign(true, this.form, history.state)方式實現數據賦值的，可是並無成功）。下面作個小總結：緩存