Vue 路由返回恢復頁(yè)面狀態(tài)的操作方法

路由參數、路由導航守衛：頁(yè)面后退返回時(shí)，保留搜索結果

需求場(chǎng)景：首頁(yè)搜索內容，點(diǎn)擊跳轉至詳情頁(yè)，頁(yè)面后退返回主頁(yè)，保留搜索結果。

方案：路由參數；路由守衛

需求描述

在使用 Vue 開(kāi)發(fā)前端的時(shí)候遇到一個(gè)場(chǎng)景：在首頁(yè)進(jìn)行一些數據搜索，點(diǎn)擊搜索結果進(jìn)入詳情頁(yè)面，瀏覽詳情頁(yè)后返回主頁(yè)。但這時(shí)候之前的搜索記錄和翻頁(yè)就消失了，用戶(hù)體驗不好。所以需要在返回后恢復跳轉前的頁(yè)面參數狀態(tài)。

當然如果條件允許，最簡(jiǎn)單的辦法是點(diǎn)擊搜索結果使用新頁(yè)面打開(kāi)（例如百度那樣）。但當前需求是一個(gè)完整的Vue開(kāi)發(fā)的項目，并不是打開(kāi)站外地址，而且詳情的內容也不多，使用新頁(yè)面不太合適（性能較差而且容易制造巨量標簽頁(yè)）。

這里介紹兩種比較容易實(shí)現的解決方案：

• 方案一：將搜索參數存儲在路由參數（route.query）中，加載頁(yè)面時(shí)根據參數搜索

優(yōu)點(diǎn)：刷新不影響；實(shí)現簡(jiǎn)單

缺點(diǎn)：參數只能是基礎類(lèi)型、長(cháng)度受限；路徑看起來(lái)比較難看；只對瀏覽器返回有效，手動(dòng)跳轉回首頁(yè)不行

• 方案二：使用路由守衛鉤子，在離開(kāi)頁(yè)面前本地存儲頁(yè)面參數（vuex、Local Storage 等等）

優(yōu)點(diǎn)：參數類(lèi)型長(cháng)度都比較自由；路徑看起來(lái)清爽美觀(guān)；對任意方式返回主頁(yè)都有效

缺點(diǎn)：需要額外進(jìn)行數據存儲操作，如果使用store模式或vuex則刷新頁(yè)面失效

方案一：路由參數

如果參數不多，并且不介意在路徑后面有一大串參數（流下強迫癥的淚水），可以直接把參數放在路由路徑里（比如百度就是這樣：baidu.com/s?wd=abc&rsv_spt=1&rsv_iqid=0x8a76279a000e2979&...，可以看到，確實(shí)是很長(cháng)的一大串）。

在點(diǎn)擊搜索后，使用 vue router 進(jìn)行跳轉并傳參：

// 搜索頁(yè)面

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

這里要注意 query 傳參和 params 傳參的區別：前者的參數會(huì )以 ?k1=v1&k2=v2 的形式續在路徑后面，能直接在地址欄中看到，因此不受頁(yè)面跳轉、刷新影響；后者只在第一次跳轉到對應頁(yè)面時(shí)起作用，再刷新跳轉就沒(méi)有了。因此這里要使用 query 傳參。如果把參數按照格式手動(dòng)寫(xiě)在 path 中也是可以的，但易讀性和擴展性明顯更差，除非只有一兩個(gè)簡(jiǎn)單參數，否則不推薦。

另外，由于這個(gè)參數是要放進(jìn)路徑里的，因此只能是基本類(lèi)型的鍵值對，數組或對象不能很好地支持。如果參數簡(jiǎn)單，可以將相應的對象展開(kāi)當做參數（需要保證不同對象中沒(méi)有重名鍵），但在跳轉到的搜索結果頁(yè)面中讀取時(shí)，就只能逐個(gè)屬性的獲取。

// 搜索結果頁(yè)面

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

方案二：本地存儲參數

由于我這想存的參數是三個(gè)對象，展開(kāi)成鍵值取著(zhù)又太不方便，所以使用了這種方案。由于項目里本來(lái)也使用了 vuex，就順便存在了 vuex 里面，根據實(shí)際情況存在哪兒都行。vuex 的缺點(diǎn)是一刷新就刷沒(méi)了，對于搜索結果這種優(yōu)化體驗性質(zhì)的功能影響不大；如果有對應需求可以存在 local storage 里面。

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

Vue Router 提供了系列 API 來(lái)實(shí)現相應功能，具體包括全局的前置/解析/后置守衛、路由配置守衛、組件守衛等方式。所謂”守衛“，其實(shí)相當于渲染過(guò)程中的”鉤子“，與熟悉的 created, mounted 一樣。

完整的導航解析流程：

1. 導航被觸發(fā)。
2. 在失活的組件里調用 beforeRouteLeave 守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置里調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件里調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鉤子。
11. 觸發(fā) DOM 更新。
12. 調用 beforeRouteEnter 守衛中傳給 next 的回調函數，創(chuàng )建好的組件實(shí)例會(huì )作為回調函數的參數傳入。

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

// 搜索結果頁(yè)面

beforeRouteLeave(to, from, next) {
  // vuex 存儲操作
  this.$store.commit("updateRevert", {
    query: this.queryParam,
    page: this.pageParam,
    filter: this.filter,
  });
  next();	// 繼續后續的導航解析過(guò)程
},

加載頁(yè)面時(shí)檢查是否有保存的參數，有的話(huà)進(jìn)行相應恢復操作：

// 搜索結果頁(yè)面

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

結語(yǔ)&參考文獻

以上是兩種保存頁(yè)面狀態(tài)方式的分享。其中很多選擇是與當時(shí)的實(shí)際需求相關(guān)的，因此不一定在所有場(chǎng)景下都是最佳方案。對于你的具體需求，可能文中的方案可能存在不足，或者有更簡(jiǎn)單的方法；文中盡可能解釋了每個(gè)步驟的實(shí)際需求和依據，以便參考。對于文中的的疏漏與不足，歡迎在評論中探討與指正。

到此這篇關(guān)于Vue 路由返回恢復頁(yè)面狀態(tài)的文章就介紹到這了,更多相關(guān)Vue 路由頁(yè)面狀態(tài)內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！