前言：
vue路由有一個HTML5 History 模式,這個模式要在路由裡面另外開啟的，很多人在剛使用路由的時候之前不知道這個模式，所以並沒有啟用，然後就把專案部署上去了，因為這個模式還是有挺多優點的，最後還是會開啟這個模式。
然而因為之前使用hash模式再改為histroy模式還是有些問題的，我已經踩過坑了，然後把這幾個問題寫出來。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。
本文首發於我的個人blog：obkoro1.com
開啟history模式：
如果不開啟的話，路由預設是hash模式，開啟這個模式前端的工作也很簡單，如下：
mode: 'history' //在路由那裡配置一下這個
複製程式碼最後需要後端的做一些配置配合，這裡可以參考一下文件給的栗子。
history模式的優點:
-
url變成真正的url，url看上去更好看。
http://yoursite.com/#/a/b //hash模式 http://yoursite.com/a/b //history模式 複製程式碼 -
可以使用vue-router的滾動行為，這個用來記憶進入其他頁面之前的位置非常好用，配置一下就可以直接使用了，前提是開啟histroy模式。
-
類似專案引入微信js-sdk的時候，一些操作是對url是有要求，url不能帶上'#'，如果沒有開啟histroy模式，很可能會導致問題。
-
像vue-cli的配置，都是以路由開啟history模式的標準來配置的（下面會講到一個栗子），沒有開啟的話，自己要另外配置。
先hash模式，後histroy模式
就像開頭說的，這裡的問題指的是：先用hash模式部署專案到線上，然後再開啟histroy模式，由此引發的一些問題。
1.找不到資源問題：
在hash模式下面，直接打包的話，會導致找不到css、js和圖片資源，然後經過百度之後，做出瞭如下截圖的配置操作，更改assetsPublicPath：'/'為 assetsPublicPath：'./'
在hash模式下，像上面那麼配置就沒有問題了。當時我還以為vue-cli配置有問題，實際上，人家才沒有問題呢，是我們自己沒有開啟history模式的問題。
然後開啟了histroy模式之後，因為我們之前更改了assetsPublicPath屬性，所以要把那個.給去掉，改回來：assetsPublicPath：'/'
2.請求帶上路由，導致請求失敗
正確的請求是：
http:www.xxx.com/api/介面 //api是我通過proxyTable轉發地址的代理名字
複製程式碼開啟histroy模式之後：
在二層的路由裡面會出現這種情況：
路由是：http:www.xxx.com/a/b
http:www.xxx.com/api/a/介面 //這就導致了請求失敗，要把a也去掉才是正確的
複製程式碼解決方式是：
因為我用的是axios，所以可以在全域性請求中設定一個baseURL，這個baseURL就是專案的網站地址（http:www.xxx.com）,然後二層的路由也會自動去掉前面的a和b。
3.cookie問題
這個實際上不是個問題，完全是自己作的，我把專案分為兩層。所以從a登入，b那邊重新整理就會出現沒有cookie的情況。
兩層路由
http://yoursite.com/a
http://yoursite.com/b
複製程式碼這裡是因為cookie能否拿到跟儲存的路由位置是有關的，之前使用hash模式因為hash模式的urlhttp://yoursite.com/#/a/b，會統一存在http://yoursite.com下面。
而history模式cookie就會存在http://yoursite.com/a或者http://yoursite.com/b下面，另外一邊就會沒有cookiie。
解決辦法：
-
不要分為兩層，統一所有的路由都在一個路由地址下面。
-
在專案的路由的根地址
path:'/'裡面存cookie。 -
使用sessionStorage存資訊，我就是用這個方法，使用方法。
sessionStorage只要在http://yoursite.com都可以訪問的到，不管是存在a上面還是b上面。
後話
以上就是本文的所有內容，建議專案一開始還是直接跟後端說一下，開啟histroy模式，省得後面的種種坑。上面的內容都是本人親自踩坑之後的血淚教訓，希望可以幫助到需要的朋友，最後Merry Christmas。
最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。 個人blog and 掘金個人主頁
以上2017.12.25