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

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();

 },

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

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