從列表頁跳轉到詳情頁，返回列表頁時列表頁與之前的狀態相同

vue專案中有這樣一個需求，從列表頁跳轉到詳情頁，返回列表頁的時候列表頁還是之前的狀態。類似於國家司法鑑定網的列表頁

 

當我點選獻縣司法醫學鑑定中心，就跳轉到它的詳情頁

當點選瀏覽器的返回按鈕返回到列表頁，保留之前的狀態以。

看到網上大多數的解決方法是用keepAlive，將列表頁快取。但是我按照上面的方式還是有很多問題，並且很久都沒解決。於是另闢蹊徑，下面我要說的這個方法雖然有點笨，但功能還是可以實現的。

將這些狀態的引數存到列表頁的位址列中，比如查詢主體、所在省份、業務領域、以及搜尋框中的內容，還有如果是分頁，頁碼也要存到url中。

不多囉嗦了，下面直接上程式碼了。下面這是列表頁的路由，直接在地址中拼接引數。寫在router.js裡面

{
    // qtype，searchValue，provincesValue，professionalValue，pageNum  這些是狀態引數
    path: '/searchPage/:qtype?/:searchValue?/:provincesValue?/:professionalValue?/:pageNum',
    name: 'searchPage',
    component: () => import('@/views/searchPage')
 },

下面這些寫在列表頁的vue檔案的methods裡，我只寫點選搜尋的方法，當點選查詢主體、所在省份、業務領域時同樣加上

this.$router.push({
        path: '/searchPage/searchPage',
        query: {
          searchValue: this.searchValue, // 輸入框的值
          qtype: this.qtype,  // 查詢主體
          provincesValue: this.provincesValue, // 所在省份
          professionalValue: this.professionalValue // 業務領域
        }
      });

// 點選頭部輸入框的搜尋
search(value) {
      this.searchValue = value; 
      this.getSerachResults(); // 查詢列表
    
      // 跳轉到列表頁，其實是自己跳轉到自己的頁面，這個是為了將引數存到url中
      this.$router.push({
        path: '/searchPage/searchPage',
        query: {
          searchValue: this.searchValue, // 輸入框的值
          qtype: this.qtype,  // 查詢主體
          provincesValue: this.provincesValue, // 所在省份
          professionalValue: this.professionalValue // 業務領域
        }
      });
    },

點選這些查詢引數的時候是不用加pageNum的，點選頁碼的時候要把pageNum引數加上

handleCurrentChange(val) {
      this.pageNum = val;
      this.getSerachResults(); // 查詢列表
      this.$router.push({
        path: '/searchPage/searchPage',
        query: {
          pageNum: val,
          searchValue: this.searchValue,
          qtype: this.qtype,
          provincesValue: this.provincesValue,
          professionalValue: this.professionalValue
        }
      });
    }

這樣在點選查詢條件時就把引數都新增到列表頁的位址列中了（對了，在跳轉自己頁面的時候列表頁是不會重新載入頁面的）

http://www.sfjdml.com/web/searchPage?searchValue=123&qtype=1&provincesValue=安徽&professionalValue=法醫臨床

然後點選某一條資料跳轉到該條的詳情頁，再返回的時候相當於訪問 http://www.sfjdml.com/web/searchPage?searchValue=123&qtype=1&provincesValue=安徽&professionalValue=法醫臨床  ，然後將位址列中的引數取出來作為查詢條件，走查詢介面就返回跟之前頁面相同的列表資料了。下面這些程式碼可以寫在created中

// 位址列中輸入框的值
if (this.$route.query.searchValue) {
   this.searchValue = this.$route.query.searchValue;
}

// 位址列中的頁碼
if (this.$route.query.pageNum) {
  this.pageSize = Number(this.$route.query.pageNum);
}

// 位址列中的查詢主體
if (this.$route.query.qtype) {
  this.pageSize = Number(this.$route.query.qtype);
}

// 位址列中的所在省份
if (this.$route.query.provincesValue) {
  this.pageSize = Number(this.$route.query.provincesValue);
}

// 位址列中的業務領域
if (this.$route.query.professionalValue) {
  this.pageSize = Number(this.$route.query.professionalValue);
}

this.getSerachResults(); // 查詢列表

其實，主要的做法是將引數存到位址列中，因為位址列中的引數重新整理也不會丟失。

還有一個問題，如果是滾動到頁面中間或者最後再點選到詳情頁面的。那得保留列表頁的滾動位置，當返回得時候還是在之前的位置。首先在列表頁加入以下程式碼，beforeRouteLeave與methods同級。在離開列表頁的時候判斷是否要跳轉到詳情頁面，是就記錄滾動條位置，存到sessionStorage中

beforeRouteLeave (to, from, next) {
    if (to.name === 'details') { // details是詳情頁
      let scrollTop = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }
      sessionStorage.setItem("offsetTop", scrollTop);
    } else {
      sessionStorage.clear();
    }
    next()
  },

然後在查詢介面返回列表資料後取出滾動位置給頁面賦值，一定要在返回列表資料後取位置賦值。

// 搜尋結果
    getSerachResults() {
      this.keywords = this.searchValue + this.provincesValue + this.professionalValue;
      serachResults(this.keywords, this.pageNum, this.pageSize,this.qtype)
        .then(res => {
          if (res.code === 200 && res.obj !== null) {
            if (res.obj.content && res.obj.content.length !== 0) {
              this.results = res.obj.content;
              this.pageNum = res.obj.pageable.pageNumber + 1;
              
              //加上這一段程式碼
              this.$nextTick(() => {
                let _offset = sessionStorage.getItem("offsetTop"); // 取出滾動位置
                document.documentElement.scrollTop = Number(_offset); // 給頁面賦值
              });


            } else {
              this.results = [];
              this.pageNum = 1;
            }
          }
        })
        .catch(error => {
          this.results = [];
          this.pageNum = 1;
        })
    },

最後在之前跳轉存引數的時候清楚掉sessionStorage，因為我只存了滾動位置到sessionStorage裡面，所以在方法中加入sessionStorage.clear()就行

// 點選頭部輸入框的搜尋
search(value) {
      this.searchValue = value; 
      this.getSerachResults(); // 查詢列表
    
      // 跳轉到列表頁，其實是自己跳轉到自己的頁面，這個是為了將引數存到url中
      this.$router.push({
        path: '/searchPage/searchPage',
        query: {
          searchValue: this.searchValue, // 輸入框的值
          qtype: this.qtype,  // 查詢主體
          provincesValue: this.provincesValue, // 所在省份
          professionalValue: this.professionalValue // 業務領域
        }
      });
    
    // 清除滾動位置
    sessionStorage.clear();

 },

這裡清除滾動位置，是為了防止每次點選查詢主體、所在省份、業務領域、頁碼、搜尋按鈕時頁面位置一直不變的問題。

大致思路就是這樣了，如果有錯誤或者疑問的地方望指出。