vue Router在新標籤打開頁面的實踐
先介紹一下背景
對於前面的啰嗦不喜歡看的同學可以直接跳轉到後面「實現方案」去看結果。
2107年底借著公司一個內部系統前端重構的基礎，引入了vue及ElementUI框架重新了系統前端。但是熟悉Vue框架的同學都知道我們默認使用vue-cli新建的帶vue Router的webpack項目模板是單頁面應用（spa），可是系統做好以後遇到了一個問題，例如A頁面的的數據是根據搜索條件檢索的結果，結果渲染到頁面後通過點擊其中一條的詳情按鈕跳轉到最新的詳情頁面，這個時候當前頁面就會被刷新渲染成詳情頁面，如果返回，正常情況是返回到檢索頁面的默認情況，可是用戶需求是保留之前的搜索結果。畢竟有可能用戶一天要查看多次檢索結果的詳情，總不能每次返回都讓用戶手動檢索一遍吧。於是，最初的思路誕生了。
Vue Router打開新標籤
搜索如果使用Vue Router 打開新標籤。中文搜索情況下國內論壇搜不到靠譜辦法的時候，嘗試google 「vue Router open new tab」。得到的結果也知道能是這樣
參見這裡
不過也有答案提示使用window.open實現，於是乎，最後我的初步實現方案就成了下面這樣
將參數序列化後綴在URL後面通過window.open打開新標籤。初步，這個需求也算是這樣解決了。不過，對於喜歡研究的人來說，這麼初步解決確實不是一個很能服帖的。
頁面切換保留搜索狀態
於是，第二個念頭就這樣冒出來了，畢竟，單頁面應用能解決的需求不一定非要多頁面去解決嘛。如果我這次在你跳轉詳情之前記錄下來。等你下次返回的時候自動把上次的搜索結果直接展示給你，這樣省的用戶再次輸入搜索條件來進行搜索豈不完美解決需求了嗎？哈哈哈，哎呀，我不得不為我的聰慧而小小的驕傲一把。
於是把這個想法跟產品經理簡單商討一下以後對方也表示，你如果能實現保留前面搜索結果的話，那麼新標籤的打開也似乎就沒有必要了。
於是開始了第二次搜索之路。如何保留表單輸入歷史，vue Router多頁面切換保留前面輸入記錄等搜索結果下，我得到了一個基本統一的建議：Vuex。Vuex是官方推出的狀態管理工具，相信熟悉Vue的同學自然知道其用法。而且中文文檔也非常詳盡。我這裡就不班門弄斧的解釋了。
最後的結果就是使用Vuex做了一個搜索狀態的持久保持module，在每次進入希望保存狀態的時候提前保存，每次返回的時候自動取回數據填充並且自動執行搜索，這樣只要網路順暢的前提下，用戶返回的時候即可看到之前的搜索結果。美哉美哉。
但是，馬上問題又出來了。
同頁面多個搜索記錄需要傳遞該怎麼辦
在這個功能上線不久，有一次新需求改的時候測試反饋了一個問題，首頁通過XXX搜索的功能取消了嗎，為什麼現在不能自動搜索？
查了一下，原來系統有做一個首頁快捷搜索的功能。即我在首頁輸入了快捷搜索參數點擊搜索頁面自動跳轉到搜索結果頁面並且輸入前一個頁面輸入的值並且自動執行搜索結果。這部分傳參都不是問題vue Router都支持，可是問題是，我前面還有保存了一份搜索條件的呀。這樣進入搜索表單頁面豈不是混了之前輸入的值，那肯定得不到期望的搜索結果。
這要是單獨配置路由的判定去執行似乎越改越麻煩了，還不如回歸當初打開新標籤呢。
於是，今天發獃的時候想到了一個辦法，我能不能做一個配置項，在默認的情況下系統是單頁面系統，一旦打開配置那麼隨後路由的切換將直接打開新標籤呢？
解決方案
啊哈，我真的是感覺自己聰明（老臉一紅）。
瞬間思路泉涌：
噹噹噹噹。
代碼如下：
於是這樣我就開心的完成了我的設計，默認進來系統是單頁面應用，用戶按下control鍵以後系統提示您當前切換到了多頁面模式，那麼隨後打開的頁面將都是多頁面，並且所以可以通過按下control來關閉該模式。
寫在最後，遇到的問題
問題1.直接做頁面跳轉，新開的標籤頁自然就打開我們想打開的內容頁，但同時老頁面如果不做next回調上的處理也會跳到目標頁面，怎麼處理這個問題呢？
加hash，從示例代碼可以看到如果增加了hash那麼在新打開的頁面就會在路徑最後面額外增加一個new的hash，這個hash可以隨意取，我們只需要在路由守衛裡面判定是否有這個hash，就能知道當前頁面是新開頁面還是老頁面，然後老頁面next(false)組織跳轉，新頁面放行。完美解決。
問題2.這樣首次打開的頁面由於沒有hash則會默認組織載入那麼正常的請求又會被攔截該怎麼辦呢？
別忘了，系統默認是單頁面應用，正常打開初始化的時候，$isBlank=flase，所以默認會next()放行。所以這麼問題也能自動迎刃而解。
問題3.這麼做產品經理能接受嗎？
好吧，這個問題我不知道，我問了產品經理，她貌似有點火氣今天沒告訴我答案，最後能不能接受，等我更新吧。（逃）
TAG:賈學文前端 |