背景
公司第一季度需求中有一段關於瀏覽器URL地址隱藏的需求如下：
需將系統的URL地址需要進行加密處理。
a)IP地址後面的信息需要控制爲不能按照意思猜到或者改變頁面內容，不能把一些參數的名稱和值都在URL地址欄中暴露出來，需以不可表意的亂碼展示；
b)加密後的鏈接複製後不能打開同一頁面，且同一功能每次打開時的URL鏈接需不同；
以上描述總結下來共有以下幾個規則：
- IP地址後的路徑需要亂碼顯示
- 加密後的URL複製後不能在新標籤跳轉成功
- 同一功能跳轉地址URL不能相同
思路和實現
我剛開始想法是用iframe實現，隱藏頂層地址。但是這個有點前端基礎的都知道在DOM中可以看到地址，這麼做無疑在欺騙自己，所以Pass。
第二個想法是能不能做得和短地址服務一樣，這個得先把所有地址路徑做個映射保存起來，通過這個短地址獲取正確的地址，然後再跳轉。但是這個有幾個難點，第一個是系統中路由非常多，要全部實現映射關係無疑非常難，第二個是如果這樣做就違背了同一功能跳轉地址URL不能相同的原則，所以Pass。
最後想了下，如果要滿足第三個點同一功能跳轉地址URL不能相同，就需要在訪問的時候進行亂碼加密，而且得滿足瀏覽器刷新、前進、後退這些操作能通過亂碼取到真實地址。
完成這個需求開發，主要有兩個重點，第一個是沒在系統內部進行修改而是在vue-router框架內部進行修改的，第二個是javascript中BOM可以通過修改location.hash而改變當前URL的hash地址，重要的是修改這個值可以改變URL地址但是不跳轉。
最後說下實現方法，首先vue-router是可以獲取到當前URL地址的，然後將獲取到的地址和登錄人uuid通過加密生成fullPath的加密地址，隨機生成一個32位亂碼tempPath，然後通過location.hash=tempPath就更改了URL的hash值，也就更改了URL地址，但是地址跳轉是對的。此時就造成循環，點擊新功能，vue-router獲取到當前真實地址，跳轉，然後加密並改變URL的hash。
但是有個問題，如果刷新頁面如何從亂碼中找到對應的正確地址呢？所以需要把兩個值tempPath和fullPath保存在sessionStorge中，然後刷新的時候通過url截取到hash如果和sessionStorge中的tempPath相同則取到fullPath，然後在路由守衛beforeEach中通過將fullPath解密獲取到真實路徑，然後再跳轉到真實路徑。可能你會問，爲啥不是localStorge，原因是爲了滿足規則2（加密後的URL複製後不能在新標籤跳轉成功），sessionStorge只在當前標籤頁中有效，這樣你複製地址然後在新頁籤中跳轉就獲取不到sessionStorge中的tempPath，也就跳轉不了。
刷新操作是實現了，但是後退前進操作呢？我需要在vue-router中設置一個存儲歷史的機制。
我是這麼做的，通過給vue-router中設置一個全局數組，這個數組保存了tempPath和fullPath，這樣前進和後退操作就實現了。你以爲這樣就好了？太天真了，如果刷新頁面全局數組就丟失了，GG。想來想去都必須要在瀏覽器中設置一個緩存，保證刷新操作數據不會丟失，但是如果放到sessionStorge中也太難受了，也不好放。最後發現每個標籤頁是有個location.history對象的，vue-router本質上也是操作window.history.pushState和replaceState實現跳轉的，剛好這個pushState和replaceState有個state對象可以保存在當前頁籤中，只要這個頁籤（新頁籤不行）地址不變，這個數據就一直存在。那麼刷新前進後退都可以通過這個history.state獲取到fullPath，然後解密跳轉。
最後實現的效果是這樣的，先獲取sessionStorge中的fullPath，如果沒有就獲取全局數組中的fullPath，還沒有就獲取history對象中的數據。
總結
做完後其實感覺直接利用location.hash和location.history就可以直接實現，還不用通過tempPath獲取fullPath，簡直完美。
說了這麼多感覺一半都是廢話，如果開始的時候直接用location.history哪有這麼多坑，所以平時js還是要多多總結的，關鍵時候就用到了。思維方式也是要改變的，不能只關注系統本身而忽略了用到的框架、插件甚至IDE，要習慣在框架源碼上做事情，這樣就有可能起到事半功倍的效果。如果不瞭解vue-router源碼這個需求真不知道如何下手。
最後代碼就不貼了，如果有問題可以找我。