來源 | https://www.cnblogs.com/skuld-yi/archive/2021/07/13/15004664.html

需求描述

• 方案一：將搜索參數(shù)存儲在路由參數(shù)（route.query）中，加載頁面時根據(jù)參數(shù)搜索
• 優(yōu)點：刷新不影響；實現(xiàn)簡單
• 缺點：參數(shù)只能是基礎(chǔ)類型、長度受限；路徑看起來比較難看；只對瀏覽器返回有效，手動跳轉(zhuǎn)回首頁不行
• 方案二：使用路由守衛(wèi)鉤子，在離開頁面前本地存儲頁面參數(shù)（vuex、Local Storage 等等）
• 優(yōu)點：參數(shù)類型長度都比較自由；路徑看起來清爽美觀；對任意方式返回主頁都有效
• 缺點：需要額外進行數(shù)據(jù)存儲操作，如果使用store模式或vuex則刷新頁面失效

方案一：路由參數(shù)

// 搜索頁面
search(param) {  // 其他處理  this.$router.push({      name: "Index",      query: { ...this.queryParam },  // 將對象展開為鍵值  });},

這里要注意 query 傳參和 params 傳參的區(qū)別：前者的參數(shù)會以 ?k1=v1&k2=v2 的形式續(xù)在路徑后面，能直接在地址欄中看到，因此不受頁面跳轉(zhuǎn)、刷新影響；后者只在第一次跳轉(zhuǎn)到對應(yīng)頁面時起作用，再刷新跳轉(zhuǎn)就沒有了。

因此這里要使用 query 傳參。如果把參數(shù)按照格式手動寫在 path 中也是可以的，但易讀性和擴展性明顯更差，除非只有一兩個簡單參數(shù)，否則不推薦。

另外，由于這個參數(shù)是要放進路徑里的，因此只能是基本類型的鍵值對，數(shù)組或?qū)ο蟛荒芎芎玫刂С帧?/span>

如果參數(shù)簡單，可以將相應(yīng)的對象展開當(dāng)做參數(shù)（需要保證不同對象中沒有重名鍵），但在跳轉(zhuǎn)到的搜索結(jié)果頁面中讀取時，就只能逐個屬性的獲取。

// 搜索結(jié)果頁面
mounted() {  // 區(qū)分 $route 和 $router  if (this.$route.query.type) {    let type = this.$route.query.type;    let keyword = this.$route.query.keyword;    // ...逐一獲取各個參數(shù)    // 進行搜索操作  } else {    // 沒有搜索參數(shù)（因為我這搜索結(jié)果和主頁是同一個頁面，所以有可能只是正常打開主頁）  }},

方案二：本地存儲參數(shù)

由于我這想存的參數(shù)是三個對象，展開成鍵值取著又太不方便，所以使用了這種方案。

由于項目里本來也使用了 vuex，就順便存在了 vuex 里面，根據(jù)實際情況存在哪兒都行。

vuex 的缺點是一刷新就刷沒了，對于搜索結(jié)果這種優(yōu)化體驗性質(zhì)的功能影響不大；如果有對應(yīng)需求可以存在 local storage 里面。

因為我的需求中有很多中方式改變參數(shù)，在改變時存儲參數(shù)太麻煩，而且容易出錯或遺漏。因此這里選擇在路由跳轉(zhuǎn)之前再統(tǒng)一存儲所需參數(shù)。

Vue Router 提供了路由導(dǎo)航守衛(wèi)系列 API 來實現(xiàn)相應(yīng)功能，具體包括全局的前置/解析/后置守衛(wèi)、路由配置守衛(wèi)、組件守衛(wèi)等方式。

所謂”守衛(wèi)“，其實相當(dāng)于渲染過程中的”鉤子“，與熟悉的 created, mounted 一樣。

完整的導(dǎo)航解析流程：

1. 導(dǎo)航被觸發(fā)。

2. 在失活的組件里調(diào)用 beforeRouteLeave 守衛(wèi)。

3. 調(diào)用全局的 beforeEach 守衛(wèi)。

4. 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。

5. 在路由配置里調(diào)用 beforeEnter。

6. 解析異步路由組件。

7. 在被激活的組件里調(diào)用 beforeRouteEnter。

8. 調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。

9. 導(dǎo)航被確認。

10. 調(diào)用全局的 afterEach 鉤子。

11. 觸發(fā) DOM 更新。

12. 調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)，創(chuàng)建好的組件實例會作為回調(diào)函數(shù)的參數(shù)傳入。

顯然，這里使用 beforeRouteLeave 鉤子就能很好地滿足要求：

// 搜索結(jié)果頁面
beforeRouteLeave(to, from, next) {  // vuex 存儲操作  this.$store.commit("updateRevert", {    query: this.queryParam,    page: this.pageParam,    filter: this.filter,  });  next();  // 繼續(xù)后續(xù)的導(dǎo)航解析過程},

加載頁面時檢查是否有保存的參數(shù)，有的話進行相應(yīng)恢復(fù)操作：

// 搜索結(jié)果頁面
mounted() {  // 判斷 vuex 中是否有保存的搜索參數(shù)  if (this.$store.state.revert) {    const revert = this.$store.state.revert;    this.queryParam = revert.query;    this.pageParam = revert.page;  // 可以直接取出整個對象    // 搜索操作  } else {    // 沒有搜索參數(shù)（因為我這搜索結(jié)果和主頁是同一個頁面，所以有可能只是正常打開主頁）  }},

結(jié)語

以上是兩種保存頁面狀態(tài)方式的分享。其中很多選擇是與當(dāng)時的實際需求相關(guān)的，因此不一定在所有場景下都是最佳方案。對于你的具體需求，可能文中的方案可能存在不足，或者有更簡單的方法；

感謝你的閱讀，如果有什么問題，請在留言區(qū)給我留言。

學(xué)習(xí)更多技能

請點擊下方公眾號